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

select/options ng-model is not bound with ng-selected

本文关键字：绑定 ng-selected ng-model 选项 选择      更新时间：2023-09-26

JSFiddle

我有这个 AngularJS html，用于根据外部值（选定组）默认选择/选项的选定项目。此列表应该有一个空选项（"-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 选择条件导致选择某个选项时，NG 模型不受此选择的影响，但是当您更改该选项时，ng 模型将获取该值。如何让ng模型的值直接采用自动选择选项？

您应该使用 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 }

在此处查看更新的小提琴

您可以在控制器中实现此目的，方法是首先将其预定义为新对象，然后在为 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;
}

工作小提琴

或

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

更新的小提琴

相关文章：