到目前为止,我已经创建了this plunker项目。
我最大的问题是使用'下一个/上一个' 项目按钮,它的功能在一定程度上,但它有两个问题。
首先,似乎与过滤数据和索引存在一些不匹配。 为了说明这一点,打开' 图库,您将看到年列出的项目符合预期。但是,当在详细视图中的项目之间导航时,它们只是按照它们在json对象中出现的顺序列出,并且分页只能部分工作。
'绘图' 图库中的项目列表已按时间顺序排列在json文件中,因此该图库似乎按预期工作。
其次,我显示prev / next按钮的方式看起来很糟糕,但它是迄今为止我能够让它工作的唯一方式。
这是列表和详细信息视图的控制器:
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;
}
});
}]);
答案 0 :(得分:0)
最后我自己想出来了,首先我用它来重新排序数组:
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;
然后在模板中访问它:
{{artworks[prevArtwork].url}}
完美无缺,没有任何黑客的东西。