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

Question

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

当每个项目的其中一个按钮被点击时，我希望 'li' 元素得到 class 选中（即它的背景变为灰色。如果另一个元素被点击我想要删除之前选择的项目 class 并添加到单击的项目。所以基本上是 class.. )

的切换

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

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

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

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

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

Answer 1

在你的指令中...

$scope.selected = false;

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

然后在你的 html...

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

只需通过 ng-click 指令运行函数 $scope.isClicked，然后当单击该项目时，该函数将触发，并将 selected 值更新为 true，将 class selected 添加到您的 <li>.

Answer 2

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

这是一个更新的插件：http://plnkr.co/edit/XgMjxBAa6nxqry3Rtt9a?p=preview

angular.module('myApp', [])

.controller('userGroupList', function($scope) {
    $scope.groups = [{
      id: 1,
      name: "group 1",
      description: "this is group 1"
    }, {
      id: 1,
      name: "group 2",
      description: "this is group 2"
    }];
    $scope.selectedIdx = -1;
    $scope.clickFn = function(index) {
      console.log('click ' + index)
      $scope.selectedIdx = index;
    }
  })
  .directive('userGroupItem', function() {
    return {
      restrict: 'E',
      scope: {
        group: '=',
        index: '@',
        clickFn: '&',
        selectedIdx: '='

      },
      templateUrl: 'items.tpl.html',
      controller: function($scope) { }
    };
  })

然后你注入 selectedIdx:

<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>

Answer 3

见分叉plnkr

简而言之，您正在为指令 user-group-item 使用 ng-repeat。对于每个重复的 user-group-item（在本例中为 2），该指令将对其自身的作用域和控制器方法进行初始化。所以你不能在指令中使用 $scope.selected 来存储选择的内容，因为每个 user-group-item 都会在其 $scope

中有自己的 selected 变量

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

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

how to toggle ng-class when directive ng-repeat item is clicked

javascript

directive

angularjs

ng-class