AngularJS ngOptions选择默认选项

时间:2015-11-12 21:17:00

标签: javascript angularjs ng-options

我有以下使用angular&#ng; ngOptions指令动态填充的select元素。

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

2 个答案:

答案 0 :(得分:2)

好吧,你可以为你的defult选项提供一些模型。看看:

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

function MyCtrl($scope) {
    $scope.options = [
        { desc: 'op1' },
        { desc: 'op2' },
        { desc: 'op3' }
    ]
    $scope.reset = function(){
    	$scope.selected = $scope.default;
    }
}
&#13;
<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>
&#13;
&#13;
&#13;

这应该可以解决问题。

答案 1 :(得分:1)

我的问题是我的<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