[英]AngularJS ngOptions select default option
I have the following select
element that is dynamically populated using angular's ngOptions directive. 我有以下
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>
How can I programatically select the default == Choose Group ==
option later on, after another value in the dropdown has been selected? 在
== Choose Group ==
了下拉列表中的另一个值之后,如何以编程方式选择默认== Choose Group ==
选项?
I have tried setting $scope.group.parameterGroupId
to null
and to ""
in my controller, neither of which worked as expected. 我已经尝试将
$scope.group.parameterGroupId
设置$scope.group.parameterGroupId
null
并在我的控制器中设置$scope.group.parameterGroupId
""
,两者都没有按预期工作。 In both cases, the option that was currently selected stays selected. 在这两种情况下,当前选择的选项都保持选中状态。
Using AngularJS v1.4.3. 使用AngularJS v1.4.3。
Well, you could atribute some model to your defult option. 好吧,你可以为你的defult选项提供一些模型。 Take a look:
看一看:
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>
This should do the trick. 这应该可以解决问题。
My problem was that my <select>
was included in my page using the ngInclude directive. 我的问题是我的
<select>
使用ngInclude指令包含在我的页面中。 I discovered that the ngInclude directive actually creates a child scope for the template being included. 我发现ngInclude指令实际上为包含的模板创建了一个子范围。 So, to be able to set the selected group, I needed to make the
ng-model
of my select accessible from its parent scope. 因此,为了能够设置所选的组,我需要从我的父作用域中访问我的选择的
ng-model
。
I ended up incorporating @Italo Ayres's solution as well, to access the default value of my select. 我最终还加入了@Italo Ayres的解决方案,以访问我的select的默认值。 Here is my corrected markup, which uses
$parent
to access the parent scope of my template that my <select>
is contained in. 这是我更正的标记,它使用
$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>
Then in my controller, I set the selected group to the default like this. 然后在我的控制器中,我将所选组设置为默认值。
$scope.group {
parameterGroupId: $scope.defaultGroup
};
Note that I don't use $scope.group.parameterGroupId = $scope.defaultGroup
because $scope.group
may not be defined when this statement is reached. 请注意,我不使用
$scope.group.parameterGroupId = $scope.defaultGroup
因为在达到此语句时可能无法定义$scope.group
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.