angularjs - 在 html 中正确使用 ng-if 指令

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.flag”设置 {{ todo.text }} 的颜色。我可以直接使用ng-style（如上图）来设置颜色，但是如何有条件地设置呢？例如，如果 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>