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

Answer 1

将它们与第一个链接在一起。

$(document).ready(function(){    
    $("#IOPS").bind("keypress", function() {
        iops_bw_update("BW");
    });
    $("#bw").bind("keypress", function() {
        iops_bw_update("IOPS");
    });
    $("#block-size").bind("change", function() {
        iops_bw_update("BW");
    });
});

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

Here是关于使用<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>添加多个类的另一篇SO帖子。

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]）设置的“停滞”类。 ng-class非常灵活，您也可以使用表达式或字符串数组。在这种情况下，数组中的第一个值是一个对象文字{0:'blue1', 1:'blue2', 2:'blue3'}[k]，带有括号表示法，用于根据k传入的键计算数组外的值，数组的第二个值是{{ 1}}本身。

<强>演示

v.direction

.blue1 {
  color: blue;
}
.blue2 {
  color: green;
}
.blue1 {
  color: red;
}
.negative {
  background-color: #ccc;
}
.positive {
  background-color: #123;
}
.stagnant {
  background-color: none;
}

有时一般的拇指规则是，当你有一个更长的表达式时，它不应该在视图中，而应该在控制器中。所以你也可以创建一个控制器函数并将期望的类作为对象文字返回，并将函数绑定到ng-class。

如何结合这些2 ng级语句？

2 个答案: