选择/选项NG-型号未选择NG绑定 [英] select/options ng-model is not bound with ng-selected

问题描述

的jsfiddle

我有这种AngularJS HTML用于根据外部值（selectedGroup）默认情况下，所选项目的选择/选项。应该有这份名单（'-ROOT-选项）一个空的选项：

I have this AngularJS html for a select/options with a selected item by default according to an external value (selectedGroup). There should be an empty option for this list ('-ROOT-' option):

<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-模型不受此选择，但是当u改变的选项，NG-模型得到​​的值。如何让NG-模式的价值直接拿自动选择的选项？

The problem is: when ng-selected condition causes an option to be selected, the ng-model is not affected by this select, but when u change the option, ng-model get the value. How to let the value of ng-model take the auto selected option directly?

推荐答案

您可以用$ P $控制器实现这一目标首先pdefining它作为一个新的对象，然后把当你把价值selectedGroup的值。

You can achieve this in the controller by predefining it first as a new object and then putting the value when you putting the value for selectedGroup.

code：

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和休息的code的原样。

have a ng-init in html and rest of your code as is.

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

更新小提琴

这篇关于选择/选项NG-型号未选择NG绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！