3

私は3つのアイテムに限定されたリストを持っています.最初のアイテムはクラスを必要としblue1、2番目は必要blue2ですblue3.

<ul>
    <li ng-repeat="tag in chartTags" class="blue-tag">
        <div class="tag blue1" ng-class="{blue1: tag == 1 }">{{tag.term}}</div>
    </li>
    <!-- <li><div class="tag blue1">item1</div></li>
    <li><div class="tag blue2">item2</div></li>
    <li><div class="tag blue3">item3</div></li> -->
</ul>

のような小切手を書く方法はありますか
ng-class="{blue1: tag == 1 || blue2: tag == 2 || blue3: tag == 3 }"

4

3 に答える 3

4

$index重複がないため、トラックバイを使用する必要がないため、これを解決できると思います。

マークアップ

<li ng-repeat="(k, v) in chartTags" class="blue-tag">
     <div ng-class="{blue1: k == 1 , blue2: k == 2 , blue3: k == 3 }">{{v.term}}</div>
</li>
于 2015-04-23T15:11:42.580 に答える
1

使用して$indexください。

<ul>
    <li ng-repeat="tag in chartTags track by $index" class="blue-tag">
        <div class="tag " ng-class="{blue1: $index== 0 ,blue2: $index== 1 ,blue3: $index== 2  }">{{tag.term}}</div>
    </li>

</ul>

プランカーを見る

于 2015-04-23T15:03:55.407 に答える
1

最初に、クラス条件を分離するためにtrack by使用して使用してインデックスを追跡する必要があります。,||

このような

<li ng-repeat="tag in chartTags track by $index" class="blue-tag">
      <div class="tag" ng-class="{blue1: $index == 0, blue2: $index == 1, blue3: $index == 2 }">{{tag}}</div>
</li>
于 2015-04-23T15:08:46.677 に答える