AngularJS ngOptions 选择默认选项答案

【问题标题】：AngularJS ngOptions select default optionAngularJS ngOptions 选择默认选项
【发布时间】：2015-11-13 23:27:07
【问题描述】：

我有以下 select 元素，它使用 Angular 的 ngOptions 指令动态填充。

<select ng-options="group.parameterGroupId as group.name for group in parameterGroups" 
        ng-change="getParameterGroup(group.parameterGroupId)" 
        ng-model="group.parameterGroupId">
    <option value="">== Choose Group ==</option>
</select>

在选择了下拉列表中的另一个值之后，我以后如何以编程方式选择默认的 == Choose Group == 选项？

我尝试在我的控制器中将$scope.group.parameterGroupId 设置为null 和""，但都没有按预期工作。在这两种情况下，当前选择的选项都会保持选中状态。

使用 AngularJS v1.4.3。

【问题讨论】：

这是stackoverflow.com/questions/24411820/…的副本吗？
不，这个问题不涉及 ngOptions。

标签： javascript angularjs ng-options

【解决方案1】：

好吧，您可以将某些模型归因于您的默认选项。看看：

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {
    $scope.options = [
        { desc: 'op1' },
        { desc: 'op2' },
        { desc: 'op3' }
    ]
    $scope.reset = function(){
    	$scope.selected = $scope.default;
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  <select ng-options="op as op.desc for op in options" ng-model="selected">
    <option value="" ng-model="default">== Choose Group ==</option>
  </select>
    {{selected}}
    
    <br />
    <button ng-click="reset()">Reset!</button>
</div>

这应该可以解决问题。

【讨论】：

谢谢，这有帮助，但问题的核心是我的选择是使用 ngInclude 包含在页面中的，它为模板创建了一个子范围。
但你最终想通了吗？还是你还在努力？ @安德鲁梅罗斯
我想通了。我在另一个答案中发布了我的解决方案。

【解决方案2】：

我的问题是我的<select> 使用 ngInclude 指令包含在我的页面中。我发现 ngInclude 指令实际上为被包含的模板创建了一个子范围。因此，为了能够设置选定的组，我需要使我的选择的 ng-model 可以从其父范围访问。

我最终也合并了@Italo Ayres 的解决方案，以访问我选择的默认值。这是我更正后的标记，它使用 $parent 来访问包含我的 <select> 的模板的父范围。

<select ng-options="group.parameterGroupId as group.name for group in parameterGroups" 
        ng-change="getParameterGroup(group.parameterGroupId)" 
        ng-model="$parent.group.parameterGroupId">
    <option value="" ng-model="$parent.defaultGroup">== Choose Group ==</option>
</select>

然后在我的控制器中，我将所选组设置为默认值。

$scope.group {
    parameterGroupId: $scope.defaultGroup
};

请注意，我不使用$scope.group.parameterGroupId = $scope.defaultGroup，因为到达此语句时可能未定义$scope.group。

【讨论】：