ng选中不在select元素中工作
我有一个绑定select
<select ng-model="collegeSelection" ng-options="c as c.CollegeName for c in colleges" ng-selected="c.CollegeName == collegeSelection.CollegeName" name="selectCollege" id="selectCollege"></select>
但是当两个c.CollegeName == collegeSelection.CollegeName匹配的项目仍然没有被选中。 文档似乎没有帮助。 有任何想法吗?
应该在<option>
标记中使用ng-selected
,而不是在<select>
标记中使用。 仔细看看它的文档和例子。
因为select
指令对所选选项的确定是基于ngModel
。 因此,一旦你删除ng-selected="c.CollegeName == collegeSelection.CollegeName"
,你的代码应该工作。
我创build了一个非常简单的plunk来演示select
指令中的“selected”function。
更多细节:
AngularJS使用ngModel
指令来启用模型和UI元素之间的“双向数据绑定”。
在“select”的情况下,您指定为<select ng-model="collegeSelection" ...>
是所选项目。 这意味着如果用户从页面的下拉菜单中select一个项目, collegeSelection
将被设置为该项目; 而且 ,如果您将collegeSelection
设置为JavaScript代码中的项目,AngularJS将确保选中相应的<option>
。
假设您的控制器中有以下代码:
$scope.colleges = [ {id: 0, name: 'a'}, {id: 1, name: 'b'}, {id: 2, name: 'c'} ]; $scope.collegeSelection = $scope.colleges[0];
而HTML看起来像:
<select ng-model="collegeSelection" ng-options="c as c.name for c in colleges"></select>
而已! 如果您运行代码, 将select学院arrays中的第一所大学。
只要记住collegeSelection
是select的选项,不pipe是因为用户在UI上select了一个项目,还是select了javascript中的项目。
这就是双向数据绑定的工作原理。
经过一段时间ng-selected
,我不能像你问的那样工作。 但是,我可以使用ng-init
预先select一个特定的选项。
这是我的解决scheme的JSFiddle 。 我的<select>
结果是:
<select ng-model="selectedColor" ng-options="color.value as color.name for color in colors" ng-init="selectedColor='yellow'"> <option value="">Select A Color</option> </select>`
而我的colors
数组是:
colors = [ {name:'Red', value: 'red'}, {name:'Orange', value: 'orange'}, {name:'Yellow', value: 'yellow'}, {name:'Green', value: 'green'}, {name:'Blue', value: 'blue'}, {name:'Indigo', value: 'indigo'}, {name:'Violet', value: 'violet'} ]
将ng-init="selectedColor='yellow'"
更改为另一个值将select不同的选项。
有些人有问题。 我发现很好的解决scheme,简单的下拉如果控制器为someController`
var vm = this; this.colors = [ {name:'Red'}, {name:'Orange'}, {name:'Yellow'}, {name:'Green'}, {name:'Blue'}, {name:'Indigo'}, {name:'Violet'} ]; this.color_selected = "Yellow"; <select ng-model="someController.color_selected" ng-options="opt.name as opt.name for opt in someController.colors"> </select>
`