ng-class based on variable value

Question

I have a variable with 4 possible values and i want to add a class for the first 3 variables and another for first 2 variables, also the requirement will some time change to one class for two possible value and another for other value

so if i give

<span ng-class="{'yes' : provisioned=='active',
    'yes': provisioned=='cannot_delete_edit',
    'no': provisioned=='cannot_delete_edit_upload',
    'no': provisioned=='inactive'}" class="flag">
</span>

it is not working how can i solve this

Catalin MUNTEANU · Accepted Answer · 2015-03-19 17:13:14Z

4

You should have each class listed only once:

<span ng-class="{'yes': provisioned=='active' || provisioned == 'cannot_delete_edit', 'no': provisioned=='cannot_delete_edit_upload' || provisioned=='inactive', 'flag': true}"></span>

answered Mar 19, 2015 at 17:13

Catalin MUNTEANU

5,6442 gold badges37 silver badges43 bronze badges

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

Comments

Brent Washburne · Accepted Answer · 2015-03-19 17:23:18Z

0

If your span has only two options, you can use this instead:

<span ng-class="(provisioned=='active' || provisioned == 'cannot_delete_edit') ?
                'yes' : 'no'">...</span>

But this still leaves hard-coded values in the HTML. Instead, I would recommend leaving the data in the controller:

$scope.provisioned = (provisioned=='active' || provisioned == 'cannot_delete_edit');

and then using

<span ng-class="provisioned ? 'yes' : 'no'">...</span>

answered Mar 19, 2015 at 17:23

Brent Washburne

13.2k4 gold badges65 silver badges86 bronze badges

Collectives™ on Stack Overflow

ng-class based on variable value

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related