AngularJS: How to add two different classes in some condition?

Question

I have an application built with AngularJs.

Html file contain information like that:

<div>
<h3 ng-if="..."></h3>
<h3 ng-if="..."></h3>
<h3 ng-if="..."></h3>
<h3 ng-if="..."></h3>
</div>

So on website I can have 4 different elements. If I have just two of then I want to use different classes then with 4 of them.

   if(myVar == 0){
        $scope.life_class='';
    }else if(myVar ==1){
        $scope.life_class='doscol';
    }else if(myVar ==2){
        $scope.life_class='tricol';
    }else if(myVar ==3){
        $scope.life_class='foucol';
    }else{
        $scope.life_class='fifcol';
    }

And with 'foucol' and 'fifcol' classes I want to add another class, but only in case that 'foucol' and 'fifcol' are in use.

I tried many times with different solutions like that:

if(active_date_count >= 2) {
    document.getElementById("h3").foucol += " font_class";
     document.getElementById("h3").tricol += " font_class";
 }

But it does't work properly. Any ideas? Thanks in advance

nrausch · Accepted Answer · 2016-03-23 16:54:40Z

1

In Angular, you can use ng-class to achieve conditional classes.

<h3 ng-class="{'font_class': condition}" ...></h3>

For more info, see https://docs.angularjs.org/api/ng/directive/ngClass

answered Mar 23, 2016 at 16:54

nrausch

1721 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS: How to add two different classes in some condition?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related