Issue using ng-class in angularJs

Question

I'm working in an application using angularJs and Bootstrap. I need to display the title of a 'scenario' but changing the Css depending on the status of the scenario and displaying a different icon.

In the beginning I tried this

<span class="text-success" data-ng-if="scenario.status=='success'"><i class="fa fa-check-circle"></i>Scenario {{scenario.title}}</span>
<span class="text-danger" data-ng-if="scenario.status=='fail'"><i class="fa fa-exclamation-circle"></i>Scenario {{scenario.title}}</span>
<span data-ng-if="scenario.status=='none'">Scenario {{scenario.title}}</span>

Which is working fine. But I would like to do it in a more proper way and avoid the duplication of the code so I would like to use ng-class, I have modified the code as following:

 <span ng-class="{text-success:scenario.status=='success' || text-danger:scenario.status=='fail'}">Scenario {{scenario.title}}
                        <i ng-class="{fa fa-check-circle:scenario.status=='success' || fa fa-exclamation-circle:scenario.status=='fail'}"></i>
                        </span>

However this way is not working and I don't see what is the problem. Could someone please help me?

Thank you!

|| syntax is wrong, you need an angular expression that return the classname — fantarama
– fantarama, Commented Jul 3, 2015 at 13:22

EpokK · Accepted Answer · 2015-07-03 13:36:20Z

2

The correct solution is:

<span ng-class="{'text-success': scenario.status === 'success', 'text-danger': scenario.status === 'fail'}">
    Scenario {{scenario.title}}
    <i class="fa" ng-class="{'fa-check-circle': scenario.status === 'success', 'fa-exclamation-circle': scenario.status === 'fail'}"></i>
</span>

The ngClass directive allows you to dynamically set CSS classes on an HTML element by databinding an expression that represents all classes to be added.

edited Jul 3, 2015 at 13:36

answered Jul 3, 2015 at 13:30

EpokK

38.1k9 gold badges63 silver badges69 bronze badges

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

Comments

fantarama · Accepted Answer · 2015-07-03 13:26:31Z

0

$scope.getClassName = function() {
     return "text-" + scenario.status;      
}

Then binding:

ng-class="getClassName()"

answered Jul 3, 2015 at 13:26

fantarama

8806 silver badges14 bronze badges

1 Comment

fantarama Over a year ago

i prefer to have logic in controller and not mixed in template, and this solution i more extensible to other kind of status

Collectives™ on Stack Overflow

Issue using ng-class in angularJs

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related