Question

我有这3个边界类：

border1

我希望点击的第一个按钮获得border2课程，第二个按钮点击border3课程，<div class="tag" ng-class="{'border1':selected1, 'border2':selected2, 'border3':selected3}" ng-mouseover="showTagDetails(t)" ng-click="clickTag(t)">{{t.name}}</div>等同。

此外，我最终会有代码阻止用户选择3个以上的按钮，因此用户只能选择3个按钮。

当前标记逻辑：

$scope.clickTag = function(t) {

}

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

{{1}}

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？

2 个答案: