Javascript 如何按单击项目的顺序设置ng类？

我有以下三个边界类：

.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>

---

您可以在此处使用

$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>

{{t.name}}

代码

$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);
  }
}

$scope.clickTag=函数（索引）{
//首先检查长度，然后限制重复索引，
如果（$scope.selected.length<4&&$scope.selected.indexOf（index）=-1）{
$scope.selected.push（索引）；
}
}

---

按照您目前的做法，只需添加一个变量即可

var selectionCount = 0

然后在您的函数中：

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

然后在HTML代码中，您需要编写：

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

---

你的意思是点击最后一个按钮会添加Boord1类，如果我在中间点击它会得到边界2，等等？@ dfsq yUp！是的，按钮可能会按顺序被点击，但是第一个按钮仍然需要

border1

，第二个

border2

Hmm在Plunkr中，我看到所有按钮现在都得到了边框样式，而不是只有1个。@LeonGaban你只想要前三个吗？那么，其他按钮将应用什么类？是的，仅适用于前3个按钮，稍后我将有代码阻止用户选择3个以上的按钮，对不起，我应该把这些详细信息放在问题中。@LeonGaban这与您第一次问的问题完全不同有一个错误

未捕获的SyntaxError:意外标记[

我删除了

，但代码仍然无效删除点，它应该可以工作：

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