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

【问题标题】：How to use controller variables along with ng-click to toggle class?如何使用控制器变量和 ng-click 来切换类？
【发布时间】：2015-04-22 03:04:10
【问题描述】：

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

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

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

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

.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 行中。现在我的代码取消选择所有内容。

有什么想法吗？

【问题讨论】：

标签： javascript angularjs angularjs-ng-click angularjs-ng-class

【解决方案1】：

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

<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 而不是索引。

【讨论】：

谢谢！嗯，喜欢这个，我不用修改 JSON 数据而且很干净，等着看@yotamN 还在做什么......

【解决方案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}
];

【讨论】：

谢谢，虽然有 1 个问题，我应该提到这一点，我的真实数据实际上是从 API 调用以 JSON 形式传入的，我无法更改对象。第二，您的代码确实在点击时添加了 selected 类，但它不会切换。
你可以让它切换。您还可以在获取数据后添加active 字段。这是最简单的答案。如果您不想添加字段，可能需要重新考虑。
所选标签是否也来自 API？如果是这样，您可以在读取 JSON 时创建一个小脚本，该脚本会将活动属性添加到标签对象并将活动标签设置为 true。
感谢 +1 的切换，但要回答您的问题，选择的标签不是来自 API，我在控制器中设置了它。这只是前 3 项，但我的代码允许预先选择任何标签。

【解决方案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>

【讨论】：

谢谢！这也有效:) +1 这个问题有很多很好的答案，与@Petr 的答案一起，但我喜欢你的利用控制器功能，因为现在可以包含更多逻辑！

【解决方案4】：

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

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

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

【讨论】：

是的，但是您如何将其与此结合：{'selected':toggleTags.item.indexOf(k) > -1}
这段代码所做的只是检查标签是否被选中，如果选中则元素获取selected类，以便您可以在ng-class中使用它，我将编辑并添加示例。