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