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

时间:2015-06-17 17:58:20

标签: javascript angularjs node.js twitter-bootstrap

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

最初,当页面被加载时,活动状态,即蓝色突出显示的框被标记为item1。这是第一需要之一。

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

同样,当我单击Previous按钮时,活动状态应该从item5跳到item4,依此类推,直到活动状态到达列表顶部,即item1,进一步上一次按钮单击后,上一个按钮应被禁用,直到活动状态到达item1和Next按钮已启用。

我很久以来无法解决这个第二需求。

Link to my plnkr

1 个答案:

答案 0 :(得分:0)

您需要更改函数$scope.selectActivepreviousItemnextItem的索引,而不是将它们设置为最后一个索引的新对象

  $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