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