CODEWITHSUNDEEP
javascriptangularjsconditional-statements
gsk
gsk

Reputation: 2379

Add class based on a condiiton in angularjs?

I want to add classes based on a condition in angularJs, I am following below method and it is working fine, Is there any best practice? 

<div ng-if="client.status != 2" class="list-primary">
                    <span class="pull-right amount">{{client.receivables|number:2}}</span>
                    <div class="name">{{client.name}}</div>
                </div>


                <div ng-if="client.status == 2" class="list-primary text-muted">
                    <span class="pull-right amount">{{client.receivables|number:2}}</span>
                    <div class="name">{{client.name}}</div>
                </div>

Upvotes: 0

Views: 102

Answers (3)

Anjum....
Anjum....

Reputation: 4204

In angular 1.1.5+ you can use javascript ternary operator.

<div ng-class="client.status == 2 ? 'text-muted' : 'other-class'" class="list-primary ">
     <span class="pull-right amount">{{client.receivables|number:2}}</span>
     <div class="name">{{client.name}}</div>
</div>

I hope this helps

Upvotes: 4

devqon
devqon

Reputation: 13997

You can use ng-class for this:

<!-- apply class 'text-muted' when client.status == 2 -->
<div class="list-primary" ng-class="{ 'text-muted': client.status == 2 }">
    <span class="pull-right amount">{{client.receivables|number:2}}</span>
    <div class="name">{{client.name}}</div>
</div>

Upvotes: 4

Peter
Peter

Reputation: 933

Have a look at ng-class which is provided in AngularJS. Documentation here:

https://docs.angularjs.org/api/ng/directive/ngClass

Upvotes: 1

Related Questions