单击上一个和下一个button,使用angularjs更改项目列表的活动状态

我有一个项目列表中的项目是通过itemController硬编码JSON数据呈现。 有两个button,即上一个和下一个。

最初,页面加载时,活动状态,即蓝色高亮框被标记为item1 。 这很好,因为它的第一个需要之一。

第二个需要是当我点击Nextbutton时,活动状态应该从item1跳到item2 ,直到活动状态到达列表的末端,即item5 ,在下一个button点击之后,Nextbutton将被禁用,直到活动状态达到item5

同样,当我点击上一个button时,活动状态应该从项目5跳转到项目4,依此类推,直到活动状态到达列表顶部,即项目1,在上一个button点击之后,上一个button应该被禁用,直到活动状态达到项目1和下一个button启用。

我很长一段时间无法解决这个第二个需求。

链接到我的plnkr

你需要改变你的函数previousItem中的$scope.selectActive索引,并且nextItem不要将它们设置为最后一个索引的新对象,像这样

  $scope.previousItem=function() { var total=$scope.items.length if ($scope.selectActive >0) { $scope.selectActive--; } } $scope.nextItem=function() { var total = $scope.items.length - 1; if ($scope.selectActive < total) { $scope.selectActive++; } } 

你可以在这里查看http://plnkr.co/edit/03N6Q1ekq5AEkCzvQGgj?p=preview