在 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 则将颜色设置为 'green'，如果 todo.flag==0 则将颜色设置为 'blue'。感谢任何帮助。

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>

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

Correct use of ng-if directive in html

angularjs

ng-style

angularjs-ng-if