Question

我正在使用AngularJS构建项目，似乎无法找到我正在寻找的任何示例...

使用AngularJS，我知道如何将类添加到任何被点击的内容中，但是如何将类添加到所有以前的项目并从所有下一个项目中删除类？

我想使用等同于.prevAll（）/。nextAll（）的jquery，但是使用AngularJS。

以下是jquery参考方式的例子：

HTML：

<a class="btn btn-primary"> Progress 1</a>
<a class="btn btn-primary"> Progress 2</a>
<a class="btn btn-primary"> Progress 3</a>
<a class="btn btn-primary"> Progress 4</a>
<a class="btn btn-primary"> Progress 5</a>
<a class="btn btn-primary"> Progress 6</a>

Jquery的：

$(".btn").on("click", function(){
    $(this).addClass('active');
    $(this).prevAll().addClass('active');
    $(this).nextAll().removeClass('active');
});

https://jsfiddle.net/mujaji/yy82twho/1/

我试图弄清楚如何使用AngularJS。有人可以解释一个好的策略或标准吗？

感谢乔

Answer 1

由于所有<a>具有相同的结构，所以我假设它是由ng-repeat生成的。

你可以在angularjs中使用ng-repeat的$ index，如下所示

<a class="btn btn-primary" ng-class="{'active': $index <= selectedIndex}" 
         ng-repeat="p in progress" ng-click="click($index)"> {{p}}</a>

active课程将根据ng-class

中给出的条件自动添加并移至标签

selectedIndex根据点击的<a>在控制器中设置。

在控制器中你会有类似下面的东西。

  $scope.progress = ['Progress 1','Progress 2','Progress 3','Progress 4','Progress 5','Progress 6'];

  $scope.selectedIndex = 0;

  $scope.click = function(indexclicked){
    $scope.selectedIndex = indexclicked;
  }

这是我创建的工作Jsfiddle演示：http://jsfiddle.net/Makarand_Patil/U3pVM/34638/

希望这会对你有所帮助。

如何在AngularJS中使用Jquery等效的prevAll（）nextAll（）？

1 个答案: