javascript - Angular js ng-class false condition not working in ng-repeat -
i want highlight li
if radio
selected. inside ng-repeat
, ng-class
true
condition working, false
condition not working, please check 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>
this because ng-repeat
create new child scope each li
element, every li
element has own radiobox
value in own scope.
for more detail, read understanding-scopes.
you avoid problem having .
in ng-model
, example using model.radiobox
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 controller, initialize model
beforehand:
$scope.model = { radiobox: undefined };
example plunker: http://plnkr.co/edit/tcorxhszytn2kcxf2m3g?p=preview
Comments
Post a Comment