NG-选择在选择元素不工作 [英] ng-selected not working in select element

问题描述

我有一个必然选择

<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匹配的项目还没有被选中。文档似乎并没有帮助。有任何想法吗？

but when both c.CollegeName == collegeSelection.CollegeName match the item still isn't selected. Documentation doesn't seem to help. Any ideas?

推荐答案

NG-选择应该被用在＆LT;选项＆GT; 标签，而不是在＆LT;选择＆GT; 标记。以在其 DOC 和例子仔细看看。

ng-selected should be used in the <option> tag, not in the <select> tag. Take a closer look at its doc and the example.

由于该选择所选选项指令的确定是根据 ngModel 。因此，一旦你删除 NG-选择=c.CollegeName == collegeSelection.CollegeName，您的code应该工作。

Because the select directive's determination of the selected option is based on ngModel. Therefore, once you remove ng-selected="c.CollegeName == collegeSelection.CollegeName", your code should work.

我创建了一个很简单的普拉克来证明的选择功能，选择指令。

I created a very simple plunk to demonstrate the "selected" feature in select directive.

AngularJS使用 ngModel 指令，以使双向数据绑定模型和UI元素之间。

AngularJS uses ngModel directive to enable "two-way data binding" between your model and UI elements.

在的选择，你的模型指定为＆LT collegeSelection 的情况下，选择NG模型=collegeSelection...＆GT ; 是选择的项目。如果用户从页面上的下拉列表中的项目，这意味着， collegeSelection 将被设置为项目; 和，如果您设置 collegeSelection 来在你的JavaScript code项目，AngularJS将确保在符合 ＆LT;期权方式＆gt; 选择

In the case of "select", the model collegeSelection you specified as <select ng-model="collegeSelection" ...> is the selected item. Which means if an user selects an item from the dropdown on the page, collegeSelection will be set to that item; and, if you set collegeSelection to an item in your javascript code, AngularJS will make sure that the corresponded <option> is selected.

假设你有你的控制器的以下code：

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];

和HTML如下：

And the HTML looks like:

<select ng-model="collegeSelection" ng-options="c as c.name for c in colleges"></select>

这就是它！高校数组中的第一个大学的将被选定的，如果你运行code。

That's it! The first college in the colleges array will be selected if you run the code.

记住 collegeSelection 是所选的选项，因为不管用户在用户界面上选择了一个项目，或者你在JavaScript中选择了一个项目它的

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.

这是如何双向数据绑定工作。

That's how two-way data binding works.

这篇关于NG-选择在选择元素不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！