conditional CSS class in ng-repeat is not working

Question

I am trying to apply a css class to label if a condition becomes true for making the radio button checked, but its not working.

sample code

<ul style="font-size: 100%;font: inherit;">
        <li  style="margin:10px 0 0 0;" ng-repeat="condition in sampleArray">
             <label class="radio" ng-class="{checked: someCodition.conditionId == condition.conditionId}">  
                      <span class="icon"></span><span class="icon-to-fade"></span>                                  
                        <input type="radio" ng-model="previewContentCondition" ng-value="condition" ng-change="setPreviewContentFromCondition()">
                        <span ng-bind="condition.conditionName"></span>                                                 
            </label>
        </li>                               
</ul>

I tried changing like this but this is also not working.

<ul style="font-size: 100%;font: inherit;">
    <li  style="margin:10px 0 0 0;" ng-repeat="condition in sampleArray">
         <label class="{{someCodition.conditionId == condition.conditionId ? 'radio ' : 'radio checked' }}">    
             <span class="icon"></span><span class="icon-to-fade"></span>                                   
             <input type="radio" ng-model="previewContentCondition" ng-value="condition" ng-change="setPreviewContentFromCondition()">
         <span ng-bind="condition.conditionName"></span>                                                    
         </label>
    </li>                               
</ul>

any solution? if I apply the css directly its working fine.

edit

if I do someCodition.conditionId == 1, class is getting applied to all the radio labels.

any error in the console ? When you say "not working", you mean the class is not added ? — Valentin Coudert
– Valentin Coudert, Commented Feb 10, 2017 at 8:57
@ValentinCoudert, I am not getting any error, class is not getting applied to the label — smali
– smali, Commented Feb 10, 2017 at 8:59
What is 'someCodition'? Where is it defined, and is the spelling mistake intentional? — rrd
– rrd, Commented Feb 10, 2017 at 9:23

vikas · Accepted Answer · 2017-02-10 12:19:59Z

1) You need to give name to your radio buttons. if you give same name to all radio buttons then only one will be clicked at once.

2) use ng-class instead.

3) Put previewContentCondition in an object $scope.myobj.previewContentCondition. ng-repeat makes its own scope and primitive values will not get in model when radio button clicked.

4) give unique value to radio button so then if it is checked you can get in model. i have used $index that can be get like ng-repeat="condition in sampleArray track by $index"

I made few changes. see working code below:

    <ul style="font-size: 100%;font: inherit;">
       {{myobj.previewContentCondition}}
    <li  style="margin:10px 0 0 0;" ng-repeat="condition in sampleArray track by $index">
         <label ng-class="{'classcolor':$index == myobj.previewContentCondition}">    
             <span class="icon"></span><span class="icon-to-fade"></span>   
             <input type="radio" name="test" ng-model="myobj.previewContentCondition" ng-checked="true" type="radio" value="{{$index}}" >
         <span ng-bind="condition.conditionName"></span>                                                    
         </label>
    </li>                               
</ul>

see working plnkr here.

daan.desmedt · Accepted Answer · 2017-02-10 08:55:04Z

0

Wrap '' around the class name :

<label class="radio" ng-class="{'checked': someCodition.conditionId == condition.conditionId}">

answered Feb 10, 2017 at 8:55

daan.desmedt

3,8201 gold badge22 silver badges33 bronze badges

3 Comments

daan.desmedt Over a year ago

How is your expression someCodition.conditionId == condition.conditionId validated?

smali Over a year ago

This condition is returning value as true I have checked it by printing the condition value.

Charlie Ng Over a year ago

wrap ' ' around single word class name is optional. When class name is like my-class, then you should wrap it like 'my-class'. Ref: angular ng-class

Collectives™ on Stack Overflow

conditional CSS class in ng-repeat is not working

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related