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

你关闭了...你应该将在ng-click上调用的函数移动到列表控制器中 - 这样你就可以设置＆＃34;选择＆＃34;索引并在所有列表条目中注入...

这是一个更新的plunker：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 2

请参阅fork plnkr

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

中都有自己的$scope变量

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

Answer 3

在你的指令......

$scope.selected = false;

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

然后在你的HTML中......

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

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

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

3 个答案: