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

【问题标题】：Correct use of ng-if directive in html在 html 中正确使用 ng-if 指令
【发布时间】：2019-02-26 03:00:49
【问题描述】：

我已经关注了 html 代码 sn-p，我想在其中使用一些“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 则将颜色设置为“蓝色”。任何帮助表示赞赏。

【问题讨论】：

标签： angularjs ng-style angularjs-ng-if

【解决方案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>

【讨论】：