javascript - 如果选中或选择未更改，如何将类添加到 Angular 中的单选按钮和复选框

Question

如果选中该项目，我想有条件地使用 ngClass。基本上，如果设置了特定模型的数据，并且在视觉上用户将看到在单选按钮或复选框上选择的项目，则将向其中添加一个类，这也允许我为选中/设置不同的CSS选定的项目。我正在使用http://vitalets.github.io/checklist-model/设置复选框和单选按钮的常规 ngRepeat。在复选框模型的示例中，它们显示已选择的复选框集中的用户项目。我希望用户加载页面并已选择项目，但也将一个类添加到所选项目中。我不想依赖“更改”功能，因为这需要用户执行操作。我希望它绑定(bind)到页面或 ngClass 中。

我调查过How do I conditionally apply CSS styles in AngularJS?但这似乎对我的情况没有帮助。

感谢任何帮助。

Answer 1

您可以有条件地应用一个类，如下所示:

<div ng-repeat="animal in animals">
    <input type="checkbox" ng-model="animal.isHungry" ng-class="{'when-condition-true': animal.isHungry}">
</div>

类(class)when-condition-true将在 isHungry 时应用当前animal的属性在 Controller 中是 true。

或者也可以有条件地切换类，如下所示:

<div ng-repeat="animal in animals">
    <input type="checkbox" ng-model="animal.isHungry" ng-class="animal.isHungry ? 'when-condition-true' : 'when-condition-false'">
</div>

这两者都将在页面加载时起作用，并且不需要用户的交互。但是，当他们选中和取消选中时，您的类(class)将自动添加或删除。