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>

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

1 个答案: