单击上一个和下一个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++; } }