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

Question

我在html中有一个项目列表，该列表是通过itemController通过硬编码的json数据呈现的。 有两个按钮，即上一个和下一个。

最初，在加载页面时，活动状态（即，突出显示的蓝色框）标记在item1 。 没关系，它是第一个需求之一。

第二个需要是，当我单击“下一步”按钮时，活动状态应从item1跳到item2 ，依此类推，直到活动状态到达列表的末尾，即item5 ，再单击“下一步”按钮，应禁用“下一步”按钮，直到活动状态到达第5 item5 。

类似地，当我单击“上一个”按钮时，活动状态应从item5跳到item4，依此类推，直到该活动状态到达列表的顶部，即item1，再单击“上一个”按钮，并且应禁用“上一个”按钮，直到活动状态达到item1和“ Next”按钮已启用。

长期以来，我无法解决第二个需求。

链接到我的plnkr

Answer 1

您需要在函数previousItem和nextItem更改$scope.selectActive索引，而不要将它们设置为上一个索引的新对象，如下所示

  $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