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.2番目のボタンが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>

ただし、2 番目と 3 番目のボタンが適切なスタイルを取得するようにロジックを記述する方法がわかりません。この問題にどのようにアプローチしますか？

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

プランカーのデモ

于 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 に答える