javascript - 单击指令 ng-repeat 项时如何切换 ng-class

Question

我用我当前的代码创建了一个 plunker .. plunker

当单击每个项目上的一个按钮时，我希望“li”元素选择该类(即将其背景更改为灰色。如果单击另一个元素，我希望将前一个项目选择的类设为删除并添加到单击的项目。所以基本上是类的切换..)

我已经尝试通过使用 $index 来实现它:

    $scope.isClicked = function(index){
             $scope.selected = index;
           };

并在 items.tpl.html 中切换它:

 <li class="item" ng-class"{selected: index===selected}">

我在这里做错了什么？有人可以帮忙吗...

Answer 1

参见 fork plnkr

简而言之，您正在使用ng-repeat作为指令user-group-item。对于每个重复的user-group-item(本例中为2)，该指令将进行自己的作用域和 Controller 方法初始化。因此，您不能在指令内使用 $scope.selected 来存储所选内容，因为每个 user-group-item 都会有自己的 selected 其 $scope 中的变量

您需要将所选状态存储在指令之外，即主 Controller 中。我在主 Controller 中创建了一个函数 setSelected ，并在指令中使用 & 将其作为方法引用传递。在 $scope.isClicked 方法中，您需要引用父作用域来获取函数 setSelected