Angular previous/next buttons on detail page and routing via parameters

Question

I've created this plunker of my project so far.

My biggest issue is to do with the 'Next/Previous' item buttons, its functioning to an extent however there are two problems with it.

Firstly, there seems to be some mismatch with filtering the data and indexing. To illustrate this open the 'Painting' gallery, you will see the items listed by year as expected. However when navigating between the items in the detail view they are listed simply by the order in which they appear in the json object and the paging works only partially.

The list of items in the 'Drawing' gallery are already in chronological order in the json file and so that gallery seems to work as expected.

Secondly the way I am displaying the prev/next buttons seems hacky but its the only way I've been able to get it to work so far.

This is my controller for the list and detail views:

galleryControllers.controller('ArtworkCtrl', ['$scope', '$routeParams', '$http', '$filter', function($scope, $routeParams, $http, $filter) {
    $scope.url = $routeParams.artworkUrl;
    $http.get('gallery.json').success(function(data) {
        // get genre from url
        $scope.artworks = $filter('filter')(data, {
            genre: $routeParams.artworkGenre
        });
        var artworks = $scope.artworks;

        // get item from url
        $scope.artwork = data.filter(function(entry) {
            return entry.url === $scope.url;
        })[0];
        var artwork = $scope.artwork;

        var url = $scope.url;
        //$scope.orderProp = 'year';

        // current artwork
        //$scope.currentArtwork = $scope.artworks[currentIndex];

        // the index of the selected artwork in the array.
        var currentIndex = $scope.artworks.indexOf($scope.artwork);

        $scope.prevArtwork = function(currentIndex) {
            var prevIndex = currentIndex - 1;
            if (prevIndex < 0) {
                // move over to the last index, if we already are at the start
                prevIndex = $scope.artworks.length - 1;
            }
            //console.log(artworks[prevIndex].url);
            return prevIndex;
        }

        $scope.nextArtwork = function(currentIndex) {
            var nextIndex = currentIndex + 1;
            if (nextIndex >= $scope.artworks.length) {
                // move over to start if we already were at the end of the list
                nextIndex = 0;
            }
            //console.log(artworks[nextIndex].url);
            return nextIndex;
        }
    });
}]);

In what respect is it not working?The plunker works fine for me and illustrates the problems I mention in my question. — Andy, Dec 01 '15 at 15:32

score 0 · Accepted Answer · answered Dec 03 '15 at 15:47

In the end I figured it out myself, firstly I used this to reorder the array:

  artworks.sort(function (a, b) {
    return b.year.localeCompare(a.year);
  });

Secondly I changed my previous/next part of the controller to this:

  /* previous button */
  if (currentIndex > 0)
    $scope.prevArtwork = Number(currentIndex) - 1;
  else
    $scope.prevArtwork = artworks.length - 1;

  /* next button */
  if (currentIndex < artworks.length - 1)
    $scope.nextArtwork = Number(currentIndex) + 1;
  else
    $scope.nextArtwork = 0;

Then accessed it in the template like this:

{{artworks[prevArtwork].url}}

Works perfectly, with no hacky stuff.

Angular previous/next buttons on detail page and routing via parameters

1 Answers1