一个对象，两个选择下拉菜单，ng-options 和值绑定答案

【问题标题】：An object, two select dropdowns, ng-options and value binding一个对象，两个选择下拉菜单，ng-options 和值绑定
【发布时间】：2015-07-07 09:27:40
【问题描述】：

我正在尝试执行以下操作：

当用户选择一个家庭时，其父母的名字会在第二个下拉列表中自动选择
当控制器设置对象时（例如在模型更新表单的情况下），两个下拉列表应反映此对象：应自动选择家庭和父项。。 p>

See this example on Codepen

angular.module('app', []).controller('mainCtrl', function($scope) {
    $scope.families = [
        { name: "My first family", parent: "Parent #1" },
        { name: "My second family", parent: "Parent #2" },
        { name: "My third family", parent: "Parent #1" }
    ];

    $scope.importNew = function() {
        $scope.model = { name: "My third family", parent: "Parent #1" };
        $scope.message = "Problem: ^ the family name isn't bind, only the parent!";
    }

    $scope.importRef = function() {
        $scope.model = $scope.families[2];
        $scope.message = "It works!";
    }
});

<div ng-app="app" ng-controller="mainCtrl">
    <h1>ng-options model binding</h1>
    <select ng-options="fam.name group by fam.parent for fam in families"
            ng-model="model">
        <option disabled value="">— Choose —</option>
    </select>
    <select ng-options="fam.parent as fam.parent for fam in families"
            ng-model="model.parent">
        <option disabled value="">— Choose —</option>
    </select>
    <button ng-click="importNew()">Import a family (new family object)</button>
    <button ng-click="importRef()">Import a family (referenced family object)</button>
    <p><small>{{ message }}</small></p>

    <p>
        <strong>$scope.model :</strong>
        <pre>{{ model | json }}</pre>
    </p>

    <p>
        <strong>$scope.families :</strong>
        <pre>{{ families | json }}</pre>
    </p>
</div>

问题：设置新族模型时，绑定无效。

【问题讨论】：

标签： javascript angularjs angular-ngmodel ng-options

【解决方案1】：

要使自动选择起作用，对象必须是从中提供选择下拉列表的数组的一部分。

// Auto-select won't work: this is a new object, even if it is equal to an existing object in the list
$scope.model = { name: "My third family", parent: "Parent #1" }

// Auto-select will work: the object is directly one of the dropdowns' list
$scope.model = $scope.families[2]

【讨论】：