-1 
<ul>
    <li ng-repeat="(k, v) in chartTags track by k" class="blue-tag">
        <div class="tag"
             ng-class="{blue1: k == 0 , blue2: k == 1 , blue3: k == 2 }"
             ng-class="{'positive': v.direction == 'positive',
                        'negative': v.direction == 'negative',
                        ''        : v.direction == 'stagnant'}">{{v.term}}</div>
    </li>
</ul>

現在、最初のものは私が持ってng-classいる2番目のものをオーバーライドしますng-class。これらの両方をどのように組み合わせて、ある種の青いクラスと方向タイプを取得しますか?

4

2 に答える 2

3

配列を使用して、式をより簡潔で読みやすくすることができます。

      <div class="tag"
         ng-class="[{0:'blue1', 1:'blue2', 2:'blue3'}[k], v.direction]">{{v.term}}</div>

CSS（または do ）を介して設定されている「停滞」クラスに注意するだけです[{0:'blue1', 1:'blue2', 2:'blue3'}[k], v.direction === 'stagnant' ? '' : v.direction]。ng-class式または文字列の配列も使用できる柔軟性があります。この場合、配列の最初の値は、{0:'blue1', 1:'blue2', 2:'blue3'}[k]渡されたキーに基づいて配列から値を評価するためのブラケット表記を持つオブジェクト リテラルであり、配列kの 2 番目の値はv.directionそれ自体です。

デモ

.blue1 {
  color: blue;
}
.blue2 {
  color: green;
}
.blue1 {
  color: red;
}
.negative {
  background-color: #ccc;
}
.positive {
  background-color: #123;
}
.stagnant {
  background-color: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div ng-app ng-init="k=1;v.direction='positive'">
  <div class="tag" ng-class="[{0:'blue1', 1:'blue2', 2:'blue3'}[k], v.direction]">Term</div>

</div>

一般的な経験則として、式が長い場合はビューに配置するのではなく、コントローラーに配置する必要があります。したがって、コントローラー関数を作成し、期待されるクラスをオブジェクト リテラルとして返し、関数を ng-class にバインドすることもできます。

于 2015-06-19T21:21:08.783 に答える