如何按点击项目的顺序设置 ng-class？

Question

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

我有这 3 个边框类：

.border1 {
  border: 1px solid #66FFFF;
}

.border2 {
  border: 1px solid #33CCFF;
}

.border3 {
  border: 1px solid #0099FF;
}

我希望单击的第一个按钮获得border1 类，第二个按钮单击border2 类和border3 相同。

此外，我最终将有代码阻止用户选择超过 3 个按钮，因此用户将只能选择 3 个按钮。

当前标记逻辑：

<div class="tag"
     ng-class="{'border1':selected1, 'border2':selected2, 'border3':selected3}"
     ng-mouseover="showTagDetails(t)"
     ng-click="clickTag(t)">{{t.name}}</div>

但是，我不确定如何编写逻辑以确保第二个和第三个按钮获得适当的样式。如何解决这个问题？

$scope.clickTag = function(t) {

}

Answer 1

您可以在此处使用$index 来维护所选索引的列表。

标记

<div class="tag-container">
    <div class="tag" ng-class="selected.indexOf($index)!== -1 ? 'border'+ (selected.indexOf($index) + 1): ''" 
     ng-mouseover="showTagDetails(t)" ng-click="clickTag($index)">
        {{t.name}}
    </div>
    <tag-details tag="t"></tag-details>
</div>

代码

$scope.clickTag = function(index) {
  //first check length and then restrict duplicate index,
  if ($scope.selected.length < 4 && $scope.selected.indexOf(index) === -1) {
    $scope.selected.push(index);
  }
}

Plunkr Demo

Answer 2

按照你现在的做法，你只需添加一个变量

var selectionCount = 0

然后在你的函数中：

$scope.clickTag = function(t) {
    selectionCount++;
    t['selected' + selectionCount] = true;
}

然后在你的 HTML 代码中你需要写：

ng-class="{'border1': t.selected1, 'border2': t.selected2, 'border3':t.selected3}"