Angularjs “详细信息”页面上的“上一步/下一步”按钮和“通过参数布线”

到目前为止，我已经创建了我的项目

我最大的问题是关于“下一个/上一个”项目按钮，它的功能在一定程度上有两个问题

首先，过滤数据和索引似乎有一些不匹配。 为了说明这一点，打开“绘画”图库，您将看到按年份列出的项目。然而，当在细节视图中的项目之间导航时，它们只是按照它们在json对象中出现的顺序列出的，分页只起到部分作用

“绘图”图库中的项目列表在json文件中已按时间顺序排列，因此图库似乎按预期工作

其次，我显示上一个/下一个按钮的方式似乎有点老套，但这是迄今为止我唯一能让它工作的方式

这是我的列表和详细视图控制器：

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;
        }
    });
}]);

GalleryController.controller（'ArtworkCtrl'、['$scope'、'$routeParams'、'$http'、'$filter'，函数（$scope、$routeParams、$http、$filter）{
$scope.url=$routeParams.artworkUrl；
$http.get（'gallery.json'）.success（函数（数据）{
//从url获取流派
$scope.artworks=$filter（'filter'）（数据{
流派：$routeParams.ArtWorkGene
});
var artworks=$scope.artworks；
//从url获取项目
$scope.artwork=data.filter（函数（条目）{
return entry.url==$scope.url；
})[0];
var artwork=$scope.artwork；
var url=$scope.url；
//$scope.orderProp='year'；
//当前作品
//$scope.currentArtwork=$scope.artworks[currentIndex]；
//阵列中选定艺术品的索引。
var currentIndex=$scope.artworks.indexOf（$scope.artwork）；
$scope.prevArtwork=函数（currentIndex）{
var prevIndex=currentIndex-1；
如果（指数<0）{
//如果我们已经在开始，请移到最后一个索引
prevIndex=$scope.artworks.length-1；
}
//log（artworks[prevIndex].url）；
回归指数；
}
$scope.nextArtwork=函数（currentIndex）{
var nextIndex=currentIndex+1；
if（nextIndex>=$scope.artworks.length）{
//如果我们已经在列表的末尾，请转到开始
nextIndex=0；
}
//log（artworks[nextIndex].url）；
返回下一个索引；
}
});
}]);

最后我自己弄明白了，首先我用这个来重新排列阵列：

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

其次，我将控制器的上一部分/下一部分更改为：

  /* 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;

---

工作完美，没有任何杂七杂八的东西。

在什么方面不起作用？plunker对我来说很好，它说明了我在问题中提到的问题。

{{artworks[prevArtwork].url}}