How to add class to radio button and checkboxes in Angular if checked or selected not on change

Question

I want to use ngClass conditionlly if the item is checked. Basically in a way that if the data for the particular model is set and visually the user will see the items selected on either a radio button or check-box that a class will be added to it also allowing me to set different css for checked/selected items. I am using http://vitalets.github.io/checklist-model/ to set up check-boxes and just a regular ngRepeat for radio buttons. In the exaple of the check-box model they show the user item from the set of check boxes selected already. I want the user to load the page and have the item selected already but also with a class added to just the items selected. I do not want to be dependent on a 'change' function because that requires an action from the user. I want it bound to the page or with in ngClass.

I have looked into How do I conditionally apply CSS styles in AngularJS? but it did not seem to help with my situation.

Any help is appreciated.

Answer 1

You can apply a class conditionally like so:

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

The class when-condition-true will be applied when the isHungry attribute of the current animal is truthy in the controller.

Alternatively can also switch a class conditionally like so:

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

Both of these will work on page load and don't need interaction from your users. But when they do check and uncheck your classes will be added or removed automatically.