Angular js动态选择未绑定到ngmodel答案

【问题标题】：Angular js dynamic select not binding to ngmodelAngular js动态选择未绑定到ngmodel
【发布时间】：2017-10-17 17:00:05
【问题描述】：

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

<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 值转换为数字以匹配选择选项的 id，如果我创建硬编码选项，一切正常。

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

正如硬编码选项所提到的，所有代码都可以工作，并且默认情况下会根据 {{data.group}} 值选择正确的选项。

为什么data.group第一次初始化时没有选择这些动态选项中的选项？

谢谢

【问题讨论】：

标签： angularjs select options

【解决方案1】：

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

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

【讨论】：