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

Question

我有这 3 个边框 classes:

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

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

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

我想要点击第一个按钮获得 border1 class，第二个按钮点击 border2 class 并且 border3 也是如此。

另外，我最终会有代码阻止用户 select 使用超过 3 个按钮，因此用户将只能 select 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}"

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

How to set the ng-class in order of item clicked?

javascript

css

angularjs

angularjs-ng-click

angularjs-ng-class