Reputation: 320
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>
Upvotes: 1
Views: 5361
Reputation: 11547
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
Upvotes: 4
Reputation: 5701
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}"
Upvotes: 1