Javascript 单击指令ng repeat item时如何切换ng类

我已使用当前代码创建了一个plunker

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

我已经尝试使用$index来实现它：

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

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

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

我做错了什么？有人能在你的指令中帮助你吗

$scope.selected = false;

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

然后在你的html中

<li class="item" ng-class"{'selected' : selected}" ng-click="isClicked()">

只需运行函数

$scope。通过
ng click
指令单击
，然后单击该项时，函数将启动，并将
所选的
值更新为
true
，将类
所选的
添加到指令中的

$scope.selected = false;

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

然后在你的html中

<li class="item" ng-class"{'selected' : selected}" ng-click="isClicked()">



只需运行函数
$scope。通过
ng click
指令单击
，然后单击该项时，函数将启动，并将
所选
值更新为
真
，将类
所选
添加到您的
已关闭。。。您应该将在ng click时调用的函数移动到您的列表控制器中-这样您就可以设置“selected”索引并将其插入到所有列表条目中

以下是更新的plunker：

然后注入selectedx：

<div>
   <ul class="row">
      <user-group-item group="group" ng-repeat="group in groups" index="{{$index}}" selected-idx="selectedIdx" click-fn='clickFn($index)'></user-group-item>
   </ul>
</div>




你很接近。。。您应该将在ng click时调用的函数移动到您的列表控制器中-这样您就可以设置“selected”索引并将其插入到所有列表条目中

以下是更新的plunker：

然后注入selectedx：

<div>
   <ul class="row">
      <user-group-item group="group" ng-repeat="group in groups" index="{{$index}}" selected-idx="selectedIdx" click-fn='clickFn($index)'></user-group-item>
   </ul>
</div>




参见分叉

简而言之，您正在对指令
用户组项使用
ng repeat
。对于每个重复的
用户组项
（在本例中为2），指令将进行自己的范围和控制器方法初始化。因此，您不能在指令中使用
$scope.selected
来存储所选内容，因为每个
用户组项
在其
$scope
中都有自己的
selected
变量

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

简而言之，您正在对指令
用户组项使用
ng repeat
。对于每个重复的
用户组项
（在本例中为2），指令将进行自己的范围和控制器方法初始化。因此，您不能在指令中使用
$scope.selected
来存储所选内容，因为每个
用户组项
在其
$scope
中都有自己的
selected
变量

您需要将所选状态存储在指令之外，即主控制器中。我在主控制器中创建了一个函数
setSelected
，并使用指令中的
&
将其作为方法引用传递。在
$scope.isClicked
方法中，您需要参考父作用域以获取函数
setSelected
是的，它现在可以工作了。但是，是否仍然可以切换它，以便当我单击另一个按钮时，该类将从上一个元素中删除并添加到当前元素中？是的，它现在可以工作了。但是，是否仍然可以切换它，以便当我单击另一个按钮时，该类将从上一个元素中删除并添加到当前元素中？谢谢您的解释。我明白它为什么不起作用了。。现在代码正在运行。。但是，最初在页面首次加载时也会添加该类。。还有什么方法可以移除它吗？没关系，那很简单。将$scope.selected的初始值更改为-1，而不是0:）@Y.Hewa很高兴为您提供帮助谢谢您的解释。我明白它为什么不起作用了。。现在代码正在运行。。但是，最初在页面首次加载时也会添加该类。。还有什么方法可以移除它吗？没关系，那很简单。将$scope.selected的初始值更改为-1，而不是0:）@Y.Hewa很高兴为您提供帮助谢谢这对我很有帮助！现在我的代码工作了。。现在，在加载页面时，该类将应用于第一个元素。。我只希望在单击按钮时添加类。是否仍有删除它的方法？如果您将SelectedDX设置为-1，它将找不到id并完全按照您的要求执行：）非常感谢这对我很有帮助！现在我的代码工作了。。现在，在加载页面时，该类将应用于第一个元素。。我只希望在单击按钮时添加类。是否仍有删除它的方法？如果将Selectedx设置为-1，它将找不到id并完全按照您的要求执行：）