Correct use of ng-if directive in html

Question

I've following html code snippet where I would like to use some "ng-*" directive to conditionally apply color to the text.

1 <div class="checkbox" ng-repeat="todo in todos">
2   <label>
3     <input type="checkbox" ng-click="markDoneTodo(todo._id)">
4     <span ng-style="{'color': 'blue'}">{{ todo.text }}</span>
5   </label>
6 </div>

Todo model has a property called 'flag' which has value either '0' or '1'. I would like to set the color of {{ todo.text }} depending on this "todo.flag". I can use ng-style directly (as shown above) to set the color but how do I set conditionally? For example, if todo.flag==1 then set color to 'green', if todo.flag==0 then set color to 'blue'. Any help is appreciated.

Answer 1

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

.greenColor {
  color: green;
}

.blueColor {
  color: blue;
}

<div class="checkbox" ng-repeat="todo in todos">
   <label>
     <input type="checkbox" ng-click="markDoneTodo(todo._id)">
     <span ng-class="{'greenColor': todo.flag, 'blueColor': !todo.flag}">{{ todo.text }}</span>
   </label>
 </div>