Question

编辑：事实证明这是我的困惑，请看我自己的答案。

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

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

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

问题在于，无论你如何改变ng-class中表达式的顺序，它似乎总是应用样式表中最后一个的类（例如，如果你把.btn-primary放在.e以下那么在css中。它将开始使用.btn-primary的背景色。如果我使用ng-class-even来放置.e类，也会发生同样的事情。如果您实际使用chrome检查代码，则会显示订单为＆＃34; btn-primary e＆＃34;但是.e的背景颜色不会覆盖btn-primary。

有没有办法在不使用诸如！important等的css技巧的情况下使用angular更改ng-class中类的优先级。

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样式表。

Answer 2

这是预期的行为。 ng-class中的类的顺序无关紧要。 CSS着眼于特异性，如果相同则应用出现在第2级的类。在您的情况下，.e和.btn-primary具有相同的特异性，因此稍后出现在css中的类将覆盖较早的类（如果它们都更改了相同的属性）。

请参阅此处，了解我如何更改特异性以确保首先出现的类得到应用的示例...

我通过添加div来增加btn-primary的特异性。因此div的背景显示为蓝色。

的index.html：

<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>

    div.btn-primary {background-color: blue;}
    .e {background-color: red;}
    </style>
</head>
<body >
    <script src= "angular.js"></script>

    <script src= "script.js"></script>
    <div ng-controller='TeamController'>
    <div ng-class="{'e':value%2>0, 'btn-primary':value>3}">
        hello world
    </div>
    </div>

</body>
</html>

的script.js：

var app = angular.module('app', [])

app.controller('TeamController', function($scope) {
  $scope.value = 7;
});

Answer 3

所有答案都是对的，我感谢你们！

我的困惑来自于使用jquery工作太长时间并动态地将事件类添加到元素。

$('#el').click(function(){
        $('#el').addClass("two")
    });

http://jsfiddle.net/4Gtk6/

在我写下我的问题的那一刻，我意识到，在这种情况下，ng-repeat每当某些内容发生变化时（在基于某些事件的范围内）重新呈现页面，并且符合样式表顺序和特殊性每节课。再次感谢！

Angularjs ng-class类顺序/优先级

3 个答案: