AngularJS ng-class multiple conditions with OR operator

angularjs conditional ng-class
user1713964 picture user1713964 · Jun 18, 2014 · Viewed 66.2k times · Source

I try to find out the good syntax for adding classes depending on angular values. I want to activate a class regarding 2 conditions (one on live user changes, and one on loading datas) with a OR operator.

Here is the line :

 <a href="" ng-click="addFavorite(myfav.id);favorite=!favorite">
    <i class="fa orange" ng-class="{'fa-star': (favorite || (fav==myfav.id)), 'fa-star-o': !favorite}"></i>
 </a>

I tried some different codes like this one : 

 ng-class="{'fa-star': favorite, 'fa-star': (fav==myfav.id), 'fa-star-o': !favorite}"

without any success. Can someone help me finding the good syntax ?

Answer

Abhilash Augustine picture Abhilash Augustine · Jul 6, 2015

Try this.

<a href="" ng-click="addFavorite(myfav.id);favorite=!favorite">
 <i class="fa orange" ng-class="{'fa-star': favorite || fav==myfav.id, 'fa-star-o': !favorite}"></i>

No need the brackets.

Related questions

How to append a stylesheet to <head> in AngularJS $routeProvider?

I want to load a specific CSS file only when a user accesses the contact.html view on my AngularJS app/site. I found this answer which almost made sense to me How to include view/partial specific styling in …

Read More
if else statement in AngularJS templates

I want to do a condition in an AngularJS template. I fetch a video list from the Youtube API. Some of the videos are in 16:9 ratio and some are in 4:3 ratio. I want to make a condition like this: if …

Read More
How do I use $scope.$watch and $scope.$apply in AngularJS?

I don't understand how to use $scope.$watch and $scope.$apply. The official documentation isn't helpful. What I don't understand specifically: Are they connected to the DOM? How can I update DOM changes to the model? What is the connection …

Read More