2

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) {

}
4

2 回答 2

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 演示

于 2015-07-07T20:41:14.213 回答
0

按照你到目前为止的方式进行，你只需添加一个变量

var selectionCount = 0

然后在你的函数中：

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

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

ng-class="{'border1': t.selected1, 'border2': t.selected2, 'border3':t.selected3}"
于 2015-07-07T21:05:22.667 回答