I want to highlight li if that radio is selected. Inside ng-repeat, ng-class true condition is working, but false condition is not working, please check the code below

<div ng-init="friends = [
        {name:'John', age:25, gender:'boy'},
        {name:'Jessie', age:30, gender:'girl'},
        {name:'Johanna', age:28, gender:'girl'},
        {name:'Joy', age:15, gender:'girl'},
        {name:'Mary', age:28, gender:'girl'},
        {name:'Peter', age:95, gender:'boy'},
        {name:'Sebastian', age:50, gender:'boy'},
        {name:'Erika', age:27, gender:'girl'},
        {name:'Patrick', age:40, gender:'boy'},
        {name:'Samantha', age:60, gender:'girl'}
      ]">
        <ul class="example-animate-container">
          <li class="animate-repeat" ng-repeat="friend in friends" ng-class="{true:'hightlight',false:''}[radioBox==friend.name]">
             <input type="radio" name="friends" ng-model="radioBox" value="{{friend.name}}" />
          </li>
        </ul>
      </div>

I want to highlight li if that radio is selected. Inside ng-repeat, ng-class true condition is working, but false condition is not working, please check the code below

<div ng-init="friends = [
        {name:'John', age:25, gender:'boy'},
        {name:'Jessie', age:30, gender:'girl'},
        {name:'Johanna', age:28, gender:'girl'},
        {name:'Joy', age:15, gender:'girl'},
        {name:'Mary', age:28, gender:'girl'},
        {name:'Peter', age:95, gender:'boy'},
        {name:'Sebastian', age:50, gender:'boy'},
        {name:'Erika', age:27, gender:'girl'},
        {name:'Patrick', age:40, gender:'boy'},
        {name:'Samantha', age:60, gender:'girl'}
      ]">
        <ul class="example-animate-container">
          <li class="animate-repeat" ng-repeat="friend in friends" ng-class="{true:'hightlight',false:''}[radioBox==friend.name]">
             <input type="radio" name="friends" ng-model="radioBox" value="{{friend.name}}" />
          </li>
        </ul>
      </div>

• javascript
• html
• angularjs
• angularjs-ng-repeat
• ng-class

Share Improve this question Follow edited Aug 18, 2014 at 10:13 jay_t55 11.7k2828 gold badges108108 silver badges176176 bronze badges asked Aug 18, 2014 at 10:08 sameersameer 32033 silver badges1414 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

This is because the ng-repeat create a new child scope for each li element, thus every li element will has its own radioBox value in its own scope.

For more detail, read Understanding-Scopes.

You could avoid this problem by having a . in your ng-model, for example using model.radioBox like this:

<li class="animate-repeat" ng-repeat="friend in friends" ng-class="{true:'hightlight',false:''}[model.radioBox==friend.name]">
  <input type="radio" name="friends" ng-model="model.radioBox" value="{{friend.name}}" />
</li>

And in your controller, initialize the model beforehand:

$scope.model = {
  radioBox: undefined
};

Example Plunker: http://plnkr.co/edit/TcOrxhSzYtN2KCxF2M3g?p=preview

If the expression evaluates to an object, then for each key-value pair of the object with a truthy value the corresponding key is used as a class name.

ng-class="{'highlight':radioBox==friend.name}"