如何组合这两个 ng-class 语句？

Question

<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 我有。你如何将这两者结合起来，以便我得到某种蓝色 class 以及方向类型？

Answer 1

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

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

它不会停止计算，因此您可以有多个类。

Here 是关于用 ng-class.

添加多个类的另一个 SO post

Answer 2

您可以使用数组并使表达式更加简洁易读：

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

您只需注意通过 css（或 [{0:'blue1', 1:'blue2', 2:'blue3'}[k], v.direction === 'stagnant' ? '' : v.direction]）设置的 "stagnant" class。 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>

有时，一般的经验法则是当您有较长的表达式时，它不应该出现在视图中，而应该出现在控制器中。所以你也可以创建一个控制器函数和 return 预期的 classes 作为对象文字并将该函数绑定到 ng-class.

如何组合这两个 ng-class 语句？

How to combine these 2 ng-class statements?

javascript

angularjs

angularjs-ng-class