Question

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

但是，当单击按钮更改列表项的等级时，单选按钮检查状态有问题。您可以看到模型值正确，显示在左侧。

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

非常感谢

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：我是新用户，很抱歉无法提供问题的捕获。

Answer 1

啊，只需将转发器更改为

即可

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

这将迫使Angular仅按照它们在数组中的位置跟踪您的list项目。

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

Angularjs：模型更改时，单选按钮检查状态无法绑定模型值

1 个答案: