Angularjs:当模型改变时，单选按钮检查状态绑定模型值失败

Angularjs: radio button check status failed to bind model value, when model changed

本文关键字：模型 状态 检查 绑定 单选按钮 失败 改变 Angularjs      更新时间：2023-09-26

页面加载后，模型和单选按钮显示正确

但是，当单击按钮更改列表项的排名时，单选按钮选中的状态有一些错误。您可以看到模型值是正确的，它显示在左侧。

那么，为什么不检查按钮以及如何修复它?

多谢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:我是一个新用户，很抱歉无法提供问题的捕获

啊，只需将中继器更改为

ng-repeat="item in list track by $index"

这将迫使Angular只根据它们在数组中的位置来跟踪你的list项。

活塞演示- http://plnkr.co/edit/Hszr5FjKblQGip7kc8Q1?p=preview

相关文章：