ng-selected 在选择元素中不起作用

IT技术 javascript angularjs angularjs-directive
2021-02-27 20:49:21

我有一个绑定选择

<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个回答

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>

而已!如果您运行代码,将选择Colleges 数组中的第一所大学

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

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

您只需要设置collegeSelection模型。
2021-04-18 20:49:21
我明白了,但我想要做的是将 select 元素中的某个项目设为所选元素。那怎么办呢?
2021-05-14 20:49:21

在玩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'"为另一个值将选择不同的选项。

您不一定需要ngInit. 尝试$scope.selectedColor = 'yellow';在您之后添加$scope.colors = [...];
2021-05-08 20:49:21

有些人对此有问题。我找到了一个很好的简单下拉解决方案,如果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>

`

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