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

Question

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

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

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

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

.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

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 2

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

<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，如果你有的话，最好使用 ids 而不是索引。

Answer 3

您可以通过将控制器功能更新为：

 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>

Answer 4

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

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

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