javascript - Angularjs ng-class class orderprecedence

EDIT:It turns out to be a confusion on my side, pls see my own answer.

I came across a strange behavior when attempting to reorder the precedence of multiple classes in ng-class.

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

The thing is that no matter how you change the order of the expressions in ng-class it always seems to apply the class which is last in the stylesheet(ie in the css if you put the .btn-primary below .e it will start using the background-color of .btn-primary). Same thing occurs if I use the ng-class-even to put the .e class. If you actually inspect the code with chrome it shows up the order to be "btn-primary e" however the background-color of .e does not override the one of btn-primary.

Is there some way to change the precedence of the classes in the ng-class using angular without using css tricks such as !important etc.

EDIT:It turns out to be a confusion on my side, pls see my own answer.

I came across a strange behavior when attempting to reorder the precedence of multiple classes in ng-class.

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

http://jsfiddle/6JjFM/1/

Is there some way to change the precedence of the classes in the ng-class using angular without using css tricks such as !important etc.

Share Improve this question edited May 29, 2014 at 9:45 asked May 29, 2014 at 8:13 Tsonev 4357 silver badges17 bronze badges

You don't want btn-primary to override e ? – Aditya Ponkshe Commented May 29, 2014 at 8:21
1 ng-class="{'btn-primary':($index>3 && $index%2!=0),'e':$index%2==0}" try this – Aditya Ponkshe Commented May 29, 2014 at 8:27
"order/precedence" was all I needed to see to figure out my problem ... – dsdsdsdsd Commented Feb 23, 2016 at 14:52

Add a ment |

3 Answers 3

Sorted by: Reset to default 3

Your problem is not actually on ng-class, as I see he work as how he design for.

Solution 1:
Yes, use CSS trick. Add below style to your stylesheet:

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

It will now use e background color.

Solution 2:
Use 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 will add inline style to the element, and it will overwrite onfile stylesheet.

That is expected behavior. The order of the classes in ng-class won't matter. CSS looks at specificity and if that is same it applies the class that appears 2nd. In your case, .e and .btn-primary have the same specificity so the class that appears later in the css will override the earlier class (if they both change the same attributes).

See here for an example of how I changed the specificity to ensure the class that appears first gets applied...

I've increased the specificity of btn-primary by adding div to it. The background of the div hence appears in blue.

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;
});

All answers are absolutely right and I thank you for them!

My confusion es from working too long with jquery and dynamically adding classes on events to elements.

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

http://jsfiddle/4Gtk6/

What I realized the moment I wrote down my question, is that in this case ng-repeat re-renders the page each time something changes(in the scope based on some event) and conforms to the stylesheet order and the specificity of each class. Thanks again!

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Angularjs ng-class class orderprecedence - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)