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

Angularjs ng-class class order/precedence

本文关键字：优先级 顺序 ng-class Angularjs      更新时间：2023-09-26

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

我在试图重新排序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的。

有没有办法改变ng类的优先级，而不使用css的技巧，如!important等

你的问题实际上不是在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将为元素添加内联样式，并且它将覆盖配置文件样式表

这是预期的行为。在ng-class中，类的顺序无关紧要。CSS着眼于特殊性，如果是相同的，它应用出现在第二的类。在您的示例中，.e和.btn-primary具有相同的专用性，因此css中后面出现的类将覆盖前面的类(如果它们都更改了相同的属性)。

看这里的一个例子，我如何改变专用性，以确保第一个出现的类被应用…

我通过给btn-primary添加div来增加它的特异性。因此，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;
});

所有的答案都是绝对正确的，谢谢你们!

我的困惑来自于长时间使用jquery和动态添加类事件到元素。

$('#el').click(function(){
        $('#el').addClass("two")
    });
http://jsfiddle.net/4Gtk6/

当我写下我的问题时，我意识到在这种情况下，ng-repeat在每次发生某些更改时(在基于某些事件的作用域内)重新呈现页面，并符合样式表顺序和每个类的特殊性。再次感谢!

相关文章：