[英]ng-selected not working in select element
I have a bound 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>
but when both c.CollegeName == collegeSelection.CollegeName match the item still isn't selected. 但是当两个c.CollegeName == collegeSelection.CollegeName都匹配时,仍未选择该项目。 Documentation doesn't seem to help.
文档似乎没有帮助。 Any ideas?
有任何想法吗?
ng-selected
should be used in the <option>
tag, not in the <select>
tag. ng-selected
应该在<option>
标记中使用,而不是在<select>
标记中使用。 Take a closer look at its doc and the example. 请仔细阅读其文档和示例。
Because the select
directive's determination of the selected option is based on ngModel
. 因为
select
指令对selected选项的确定基于ngModel
。 Therefore, once you remove ng-selected="c.CollegeName == collegeSelection.CollegeName"
, your code should work. 因此,一旦删除
ng-selected="c.CollegeName == collegeSelection.CollegeName"
,您的代码就可以使用。
I created a very simple plunk to demonstrate the "selected" feature in select
directive. 我创建了一个非常简单的插件来演示
select
指令中的“ selected”功能。
AngularJS uses ngModel
directive to enable "two-way data binding" between your model and UI elements. AngularJS使用
ngModel
指令在模型和UI元素之间启用“双向数据绑定”。
In the case of "select", the model collegeSelection
you specified as <select ng-model="collegeSelection" ...>
is the selected item. 在的情况下,“选择”,该模型
collegeSelection
指定为<select ng-model="collegeSelection" ...>
是所选择的项目。 Which means if an user selects an item from the dropdown on the page, collegeSelection
will be set to that item; 这意味着,如果用户从页面的下拉菜单中选择一个项目,
collegeSelection
设置为该项目; and , if you set collegeSelection
to an item in your javascript code, AngularJS will make sure that the corresponded <option>
is selected. 和 ,如果您将
collegeSelection
选择中的collegeSelection
设置为一个项目,AngularJS将确保<option>
相应的<option>
。
Say you have the following code in your controller: 假设您的控制器中包含以下代码:
$scope.colleges = [
{id: 0, name: 'a'},
{id: 1, name: 'b'},
{id: 2, name: 'c'}
];
$scope.collegeSelection = $scope.colleges[0];
And the HTML looks like: HTML看起来像:
<select ng-model="collegeSelection" ng-options="c as c.name for c in colleges"></select>
That's it! 而已! The first college in the colleges array will be selected if you run the code.
如果运行代码, 则将选择 colleges数组中的第一所大学。
Just remember collegeSelection
is the selected option, no matter it's because user selected an item on the UI, or you selected an item in javascript. 请记住,无论是因为用户在UI上选择了一个项目,还是您在javascript中选择了一个项目,都记住
collegeSelection
是选定的选项。
That's how two-way data binding works. 这就是双向数据绑定的工作方式。
After playing around with ng-selected
for a while I was not able to get it to work like you're asking. 在与
ng-selected
玩了一段时间之后,我无法像您要求的那样使其正常工作。 However, I was able to pre-select a specific option using ng-init
. 但是,我可以使用
ng-init
预先选择一个特定的选项。
Here's a JSFiddle of my solution. 这是我的解决方案的JSFiddle 。 My
<select>
ended up being: 我的
<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>`
And my colors
array is: 我的
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'}
]
Changing the ng-init="selectedColor='yellow'"
to another value will select a different option. 将
ng-init="selectedColor='yellow'"
更改为另一个值将选择其他选项。
Some people have problems with this. 有些人对此有疑问。 I found a great solution for a simple drop down if
controller as someController
我找到了一个很好的解决方案,可以将
controller as 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>
` `
I had a similar issue and realized the cause was because of the different data types. 我遇到了类似的问题,并且意识到原因是由于数据类型不同。
ng-model
was comparing against a string value but I was pulling an integer from the database so it wasn't automatically selecting the option. ng-model
正在与一个字符串值进行比较,但是我正在从数据库中提取一个整数,因此它不会自动选择该选项。 To overcome this, i called toString()
on the integer after querying the data from the database to ensure the data types matched. 为了克服这个问题,在查询数据库中的数据以确保数据类型匹配之后,我在整数上调用了
toString()
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.