4

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

在尝试重新排序 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 检查代码，它会显示顺序为“btn-primary e”，但是 .e 的背景颜色不会覆盖 btn-primary 之一。

是否有某种方法可以使用 angular 更改 ng-class 中的类的优先级，而无需使用诸如 !important 之类的 css 技巧。

4

3 回答 3

3

您的问题实际上并不存在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 样式表。

于 2014-05-29T08:31:46.063 回答
1

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

有关我如何更改特异性以确保应用首先出现的类的示例，请参见此处...

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

索引.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>

脚本.js：

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

app.controller('TeamController', function($scope) {
  $scope.value = 7;
});
于 2014-05-29T08:32:46.260 回答
0

所有的答案都是绝对正确的，我感谢他们！

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

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

http://jsfiddle.net/4Gtk6/

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

于 2014-05-29T09:24:41.077 回答