如何使用控制器变量和 ng-click 来切换 class？

Question

http://plnkr.co/edit/nEfBE33AJen3mz9YvjeC?p=preview

我有一个标签按钮列表，默认情况下，在加载所有项目后，我将前 3 个项目设置为具有 selected class.

现在我还需要标签来在 ng-click 上获得或失去 selected class。

您将如何组合标记或控制器中的代码？

.controller('PageCtrl',
    ['$scope',
    function($scope) {

    var vs = $scope;
    vs.message = "1st, 2nd and 3rd item should be selected by default:";

    // Gives the 1st 3 items the selected class
    vs.toggleTags = { item: [0, 1, 2] };

    // the ng-click to individually toggle the selected class:
    vs.selectTag = function(term) {
        alert(term +' in tag #'+ vs.toggleTags.item);
    };

    vs.tags = [
      {name: 'aaa'},
      {name: 'bbb'},
      {name: 'ccc'},
      {name: 'ddd'},
      {name: 'eee'},
      {name: 'fff'},
      {name: 'ggg'}
    ];

}]);

HTML

<ul>
    <li ng-repeat="(k, m) in tags"
        ng-class="{'selected':toggleTags.item.indexOf(k) > -1}"
        ng-click="toggleTags.item = $index; selectTag(m.name)">
        <div class="tag">{{m.name}}</div>
    </li>
</ul>

基本上，我想将类似以下内容的内容组合起来：{'selected' : toggle.state} 到 ng-class 行中。现在我的代码取消了所有选择。

有什么想法吗？

Answer 1

每个按钮都有一个对象，因此您可以将它添加到现有对象（代码中的 m 对象），而不是使用另一个数组来检查按钮是否被选中。

这样你就可以做到 {'selected': m.state} 非常干净。

如 maddog 所示，您只需将活动的属性添加到标签对象并检查它是否被选中而不是在不同的数组中，没有理由这样做（至少您没有已经向我们展示了）。

Answer 2

http://plnkr.co/edit/bqXi4GHxJjbD03ilJ4Me?p=preview

新 plnkr（用于切换）： http://plnkr.co/edit/bqXi4GHxJjbD03ilJ4Me?p=preview

你可以这样做。在 tags

中使用一个额外的变量

vs.tags = [
  {name: 'aaa', active: true},
  {name: 'bbb', active: true},
  {name: 'ccc', active: true},
  {name: 'ddd', active: false},
  {name: 'eee', active: false},
  {name: 'fff', active: false},
  {name: 'ggg', active: false}
];

Answer 3

如果您不想更改从服务器获取的数据 - 您可以单独创建选择模型：

<li ng-repeat="(k, m) in tags"
          ng-class="{'selected':selectedModel[$index]}"
          ng-click="selectedModel[$index] = !selectedModel[$index]">

http://plnkr.co/edit/QpoAs9XFknKug8mpNkkO?p=preview

Ofc，最好使用 ID 而不是索引，如果你有的话。

Answer 4

您可以通过将控制器函数更新为：

来实现此目的

 vs.selectTag = function(term,k) {
  if(vs.toggleTags.item.indexOf(k) == -1){
    vs.toggleTags.item.push(k)
  }
  else {
    vs.toggleTags.item.splice(vs.toggleTags.item.indexOf(k),1);
  }
    alert(term +' in tag #'+ vs.toggleTags.item);
};

并将html更新为：

<li ng-repeat="(k, m) in tags"
    ng-class="{'selected':toggleTags.item.indexOf(k) > -1}"
    ng-click="selectTag(m.name,k)">
    <div class="tag">{{m.name}}</div>
</li>

如何使用控制器变量和 ng-click 来切换 class？

How to use controller variables along with ng-click to toggle class?

javascript

angularjs

angularjs-ng-click

angularjs-ng-class