AngularJS ng-class multiple conditions with OR operator

Question

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

Answer 1

The HTML will remain the same

But the order in which classes are present in your CSS file will matter

The fa-star class will apply either when favorite is true or fav===myfav.id returns true.

Therefore if after clicking once , suppose fav===myfav.id returns true and keeps on returning true , even when clicking again , then the class fa-star will be applied always from then on.

If by default favorite is false , then fa-star-o will be applied when template is loaded the first time, but after the first click ,when favorite is set to true , it will get removed. Then on second click , when favorite is set to false again , fa-star-o it will get applied but in this case , fa-star class will also be applied as fa===myfav.id condition would be still returning true (Assuming that is the case).

Therefore you will need to prioritize which class needs to get applied for sure when it is present on the element as case can arise when both classes can be present at the same time on the element. For example if fa-star-o class takes higher priority, then put it below the fa-star in your CSS , like for example

.fa-star {
  border: 1px solid #F00;
}
.fa-star-o {
  border: 1px solid #000;
}

See working demo at http://plnkr.co/edit/Dh59KUU41uWpIkHIaYrO?p=preview