4

編集:それは私の側の混乱であることが判明しました.plsは私自身の答えを見てください.

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 の background-color を使用)。ng-class-even を使用して .e クラスを配置すると、同じことが起こります。実際にクロムでコードを検査すると、「btn-primary e」の順序が表示されますが、.e の背景色は btn-primary の色を上書きしません。

!important などの CSS トリックを使用せずに、angular を使用して ng-class のクラスの優先順位を変更する方法はありますか?

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 は特定性を調べ、それが同じ場合は 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;
});
于 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 に答える