javascript - Angularjs: radio button check status failed to bind model value, when model changed -
after page load, model , radio button display correctly.
however, when clicks button change rank of list item, there wrong radio button checked states. can see model value correct, displayed @ left side.
so, why button not checked , how fix it?
many thanks
html:
<body ng-app="radioapp"> <section ng-controller="radiocontroller"> <div ng-repeat="item in list"> <div ng-model="item.rank">rank: {{$index + 1}}</div> <div> <span>{{item.flag}}</span> <span><label><input type="radio" name="flag_{{$index}}" ng-model="item.flag" value="1">red</label></span> <span><label><input type="radio" name="flag_{{$index}}" ng-model="item.flag" value="2">green</label></span> <span><label><input type="radio" name="flag_{{$index}}" ng-model="item.flag" value="3">yellow</label></span> <span><label><input type="radio" name="flag_{{$index}}" ng-model="item.flag" value="4">blue</label></span> <span><label><input type="radio" name="flag_{{$index}}" ng-model="item.flag" value="5">pink</label></span> </div> </div> <div> <button ng-click="changrank()">change</button> </div> </section>
js:
var app=angular.module("radioapp", []); app.controller("radiocontroller", function($scope){ $scope.list = [{flag:1},{flag:3},{flag:5}] $scope.changrank = function(){ var targetrule = $scope.list.splice(2, 1); $scope.list.unshift(targetrule[0]); } });
ps: i'm new user, sorry couldn't provide capture question.
ah, change repeater to
ng-repeat="item in list track $index"
this force angular keep track of list
items place in array.
plunker demo - http://plnkr.co/edit/hszr5fjkblqgip7kc8q1?p=preview
Comments
Post a Comment