Question

默认情况下，根据外部值（selectedGroup），我有一个选定项目的选项/选项的AngularJS html。此列表应该有一个空选项（＆＃39; -ROOT - ＆＃39;选项）：

<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">

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

您需要做的唯一额外事情就是满足这一要求：

此列表应该有一个空选项（＆＃39; -ROOT - ＆＃39;选项）：

我通过在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

OR

在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

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

2 个答案: