-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覆盖了ng-class我拥有的第二个。您将如何将这两者结合起来，以便我获得某种蓝色类以及方向类型？

4

2 回答 2

3

像第一个一样将它们链接在一起。

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

它不会停止评估，因此您可以拥有多个类。

这是另一篇关于使用ng-class.

于 2015-06-19T21:20:24.583 回答
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值，而数组的第二个值是它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 回答