0

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.

Community
  • 1
  • 1
skwidgets
  • 281
  • 2
  • 8
  • 23

1 Answers1

3

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.

David Spence
  • 7,999
  • 3
  • 39
  • 63