7

我有一个绑定选择

<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 都匹配时，该项目仍然没有被选中。文档似乎没有帮助。有任何想法吗？

4

4 回答 4

22

ng-selected应该在<option>标签中使用，而不是在<select>标签中。仔细看看它的文档和例子。

因为select指令对所选选项的确定是基于ngModel. 因此，一旦您删除ng-selected="c.CollegeName == collegeSelection.CollegeName"，您的代码应该可以工作。

我创建了一个非常简单的plunk来演示select指令中的“选定”功能。

更多细节：

AngularJS 使用ngModel指令来启用模型和 UI 元素之间的“双向数据绑定”。

在“选择”的情况下，collegeSelection您指定的模型<select ng-model="collegeSelection" ...>是选定的项目。这意味着如果用户从页面上的下拉列表中选择一个项目，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>

就是这样！如果您运行代码，将选择大学数组中的第一所大学。

请记住选择的选项，无论是因为用户在 UI 上选择了一个项目，还是您在 javascript 中选择了一个项目collegeSelection 。

这就是双向数据绑定的工作原理。

于 2013-07-15T04:09:46.697 回答
12

玩ng-selected了一段时间后，我无法像你问的那样让它工作。但是，我能够使用ng-init.

这是我的解决方案的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'"为另一个值将选择不同的选项。

于 2013-07-15T15:53:21.577 回答
1

有些人对此有问题。我找到了一个简单的下拉列表的好方法，如果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>

`

于 2017-01-21T00:23:20.817 回答
0

我有一个类似的问题，并意识到原因是由于不同的数据类型。ng-model正在与字符串值进行比较，但我从数据库中提取了一个整数，因此它不会自动选择该选项。为了克服这个问题，我toString()在从数据库中查询数据后调用了整数，以确保数据类型匹配。

于 2017-12-29T21:30:29.303 回答