javascript - Angularjs ng-class类顺序/优先级

Question

编辑:原来是我这边的困惑，请看我自己的答案。

在尝试重新排列 ng-class 中多个类的优先级时，我遇到了一个奇怪的行为。

ng-class="{'e':($index%2>0),'btn-primary':($index>3)}"

http://jsfiddle.net/6JjFM/1/

问题是，无论你如何改变 ng-class 中表达式的顺序，它似乎总是应用样式表中最后的类(即在 css 中，如果你将 .btn-primary 放在 .e 下面它将开始使用 .btn-primary 的背景颜色)。如果我使用 ng-class-even 来放置 .e 类，也会发生同样的事情。如果您实际使用 chrome 检查代码，它会显示顺序为“btn-primary e”，但是 .e 的背景颜色不会覆盖 btn-primary 之一。

有没有什么方法可以在不使用 !important 等 css 技巧的情况下使用 angular 更改 ng 类中类的优先级

Answer 1

你的问题实际上不在 ng-class 上，因为我看到他按照他的设计方式工作。

解决方案 1:
是的，使用 CSS 技巧。将以下样式添加到您的样式表中:

.e.btn-primary{
    background-color: #F5F5F5;
}

它现在将使用 e 背景色。

解决方案 2:
使用 ng-style

<li 
    class="li" 
    ng-class="{'btn-primary':($index>3),'e':($index%2>0)}" 
    ng-repeat="row in rows"
    ng-style="$index%2>0 && {'backgroundColor': '#F5F5F5'}"
    >{{row}}</li>

ng-style 会为元素添加内联样式，并覆盖 onfile 样式表。