angularjsng-styleangularjs-ng-if

Correct use of ng-if directive in html


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.


Solution

  • 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>