Правильное использование директивы ng-if в html

Question

Я придерживаюсь фрагмента HTML-кода, где я хотел бы использовать некоторую директиву «ng- *» для условного применения цвета к тексту.

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 есть свойство под названием 'flag', котороеимеет значение «0» или «1».Я хотел бы установить цвет {{todo.text}} в зависимости от этого «todo.flag».Я могу использовать стиль ng напрямую (как показано выше), чтобы установить цвет, но как мне установить условно?Например, если todo.flag == 1, то установить цвет на «зеленый», если todo.flag == 0, установить цвет на «синий».Любая помощь приветствуется.

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>