选择/选项 ng-model 未与 ng-selected 绑定

Question

JSFiddle

我有这个 AngularJS html 用于选择/选项，默认情况下根据外部值 (selectedGroup) 选择项目。此列表应该有一个空选项（'-ROOT-' 选项）：

<select class="form-control" ng-model="newDoor.groupId">
    <option value="">-ROOT-</option>
    <option ng-repeat="group in groups" ng-value="group.id" ng-selected="group==selectedGroup">
        {{group.name}}
    </option>
</select>

问题是： 当 ng-selected 条件导致选择一个选项时，ng-model 不受此选择的影响，但是当您更改选项时，ng-model 获取值。如何让 ng-model 的值直接取自动选择的选项？

Answer 1

您应该使用ngOptions。 ngOptions 旨在填充选择输入，使用作为属性传递的微语法。

例如，在您的情况下，您可以使用以下内容：

<select ng-model="newDoor.groupId" 
        ng-options="group.id as group.name for group in groups">

这将列出groups 中的每个group，使用group.id 作为值并显示group.name 作为名称。它会为您处理更改检测。

你需要做的唯一额外的事情就是考虑这个要求：

此列表应该有一个空选项（'-ROOT-' 选项）：

我通过在 groups 数组的前面添加另一个选项来做到这一点：

$scope.groups.unshift({ name: '-ROOT-', id: -1 });

最后，为了确保在初始化作用域时选择了真实的东西，这一行设置了newDoor.groupId：

$scope.newDoor = { groupId: $scope.groups[0].id }

查看updated fiddle here

Answer 2

您可以在控制器中实现这一点，方法是先将其预定义为一个新对象，然后在为 selectedGroup 放置值时放置该值。

代码：

function doorsTreeController($scope) {
    $scope.newDoor = {};
    $scope.groups = [{
        name: 'G1',
        id: 1
    }, {
        name: 'G2',
        id: 2
    }, {
        name: 'G3',
        id: 3
    }, {
        name: 'G4',
        id: 4
    }];
    $scope.selectedGroup = $scope.groups[1];
    $scope.newDoor.groupId = $scope.selectedGroup.id;
}

Working Fiddle

或

在 html 中有一个 ng-init，其余代码保持原样。

<div ng-app>
    <div ng-controller='doorsTreeController'>
        <select class="form-control" ng-init="newDoor.groupId = selectedGroup.id" ng-model="newDoor.groupId">
            <option value="">-ROOT-</option>
            <option ng-repeat="group in groups" ng-value="group.id" ng-selected="group==selectedGroup">{{group.name}}</option>
    </select>Selected groupId is: {{newDoor.groupId}}</div>

Updated Fiddle