更新选项时，带有 ng-repeat 的角度选择会丢失选定的选项答案

【问题标题】：Angular select with ng-repeat loses selected option when options are updated更新选项时，带有 ng-repeat 的角度选择会丢失选定的选项
【发布时间】：2015-10-20 06:29:10
【问题描述】：

我正在尝试使用 AngularJS 为动态列表创建一个编辑器。对于每个项目，我想添加一个选择列表，其中包含列表中所有元素的选项。当一个项目被添加到列表中时（JSFiddle 中的添加按钮），其他选择会丢失它们的值。模型不受此影响，只有视图。我错过了什么？

这是我的JSFiddle。

查看：

<div ng-controller="selectDemoCtrl">{{msg}}
    <table>
        <tr>
            <td>id</td>
            <td>references</td>
        </tr>
        <tr ng-repeat="item in items">
            <td>
                <input ng-model="item.id" type="number">
            </td>
            <td>
                <select ng-model="item.ref">
                    <option ng-repeat="i in items" value="i.id" ng-selected="item.ref==i.id">{{i.id}}</option>
                </select>
                </td>
        </tr>
    </table>
    <button ng-click="addItem()">Add</button>
    <div>{{items | json}}</div>
</div>

控制器：

selectDemo.controller('selectDemoCtrl', function ($scope) {
    $scope.items = [{
        id: 1,
        ref: 2
    }, {
        id: 2,
        ref: 1
    }];

    $scope.addItem = function(){
        var newitem = {id: 1, ref:1};
        for (var i = 0; i < $scope.items.length; i++){
            if ($scope.items[i].id >= newitem.id) { newitem.id = $scope.items[i].id + 1; }
        }
        if ($scope.items.length > 0){newitem.ref = $scope.items[0].id;}
        $scope.items.push(newitem);
    };
});

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

不要使用 ngRepeat，它对绑定模型不可靠。请改用ngOptions，它应该可以按预期工作：

<select ng-options="i.id as i.id for i in items" ng-model="item.ref"></select>

演示： https://jsfiddle.net/4bemy5wj/1/

【讨论】：