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

enter image description here

有什么想法吗？

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，如果你有任何指标，最好使用id而不是索引。

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所示，你只需要将活动属性添加到tags对象并检查它是否被选中而不是在不同的数组中，没有理由（至少没有你向我们展示过）。 / p>

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

4 个答案: