Angular js 动态 select 未绑定到 ngmodel

Question

我正在使用 $scope 对象中的 ngrepeat 动态生成 select，并且需要根据同一 $scope 对象中的另一个值分配默认 select 选项：这是当前代码：

<select id="group" ng-model="data.group" convert-to-number>
    <option ng-repeat="item in data.groups" value="{{item.id}}">
        {{item.group}}
    </option>
</select>
{{data.group}}

控制器中的对象：

$scope.data = {
    group: 2,
    groups: [{
        id: 1,
        name: 'Group One'
    },{
        id:2,
        name: 'Group Two'
    },{
        id:3,
        name: 'Group Three'
    }]
}

convert-to-number 是一个将 $scope 值转换为数字以匹配 select 选项的 id 的指令，如果我创建硬编码选项则一切正常。

一旦我使用 ng-repeat 动态生成选项，它就会在 select 中显示来自 data.groups 的正确选项，并在 {{data.group} 中显示正确的组 ID }，但是 select 框是空白的，我必须单击以查看选项，当我 select 一个它然后将 {{data.group}} 更新为 selected期权的价值。

如硬编码选项所述，所有代码均有效，并且默认情况下根据 {{data.group}} 值 select 编辑正确的选项。

为什么 data.group 在第一次初始化时没有 select 在这些动态选项中设置选项？

谢谢

Answer 1

AngularJS 的工作方式是在 <option> 标签内使用 ng-selected 来确认哪个选项与模型匹配。以下示例代码可以工作：

<option ng-selected="data.group == item.id"> ... </option>

Angular js 动态 select 未绑定到 ngmodel

Angular js dynamic select not binding to ngmodel

select

options

angularjs