使用Angularjs在选择下拉菜单中设置默认值

Posted 2023-02-22

【中文标题】使用Angularjs在选择下拉菜单中设置默认值

【英文标题】：Setting default value in select drop-down using Angularjs

【发布时间】：2013-07-22 19:24:51

【问题描述】：

我有一个对象如下。我必须将其显示为下拉列表：

var list = [id:4,name:"abc",id:600,name:"def",id:200,name:"xyz"]

在我的控制器中，我有一个带有值的变量。这个值决定了在下拉列表中默认选择数组中以上三项中的哪一项：

 $scope.object.setDefault = 600;

当我创建如下下拉表单项时：

<select ng-model="object.setDefault" ng-options="r.name for r in list">                 

我面临两个问题：

列表生成为

<option value="0">abc</option>
<option value="1">def</option>
<option value="2">xyz</option>

而不是

<option value="4">abc</option>
<option value="600">def</option>
<option value="200">xyz</option>

即使我有ng-model="object.setDefault"，默认情况下也不会选择任何选项

【问题讨论】：

在角度上，选择元素内选项索引中选项中的值属性

Ajay..你似乎是对的。所以现在的问题是，我如何给它一个自定义值

【参考方案1】：

问题一：

您得到的生成的 html 是正常的。显然，Angular 的一个特性是能够使用任何类型的对象作为选择的值。 Angular 在 HTML 选项值和 ng-model 中的值之间进行映射。 另请参阅 Umur 在此问题中的评论：How do I set the value property in AngularJS' ng-options?

问题2：

确保您使用的是以下 ng-options：

<select ng-model="object.item" ng-options="item.id as item.name for item in list" />

并将其放入您的控制器中以选择默认值：

object.item = 4

【参考方案2】：

当您使用 ng-options 填充选择列表时，它使用整个对象作为选定值，而不仅仅是您在选择列表中看到的单个值。所以在你的情况下，你需要设置

$scope.object.setDefault = 
    id:600,
    name:"def"
;

或

$scope.object.setDefault = $scope.selectItems[1];

我还建议只在模板中输出 $scope.object.setDefault 的值，以了解我所说的被选中。

<pre>object.setDefault</pre>

【讨论】：

只有第二个可以工作。 select 使用 === 来比较值。如果你设置另一个具有相同属性的对象，它会被认为是不同的。

很高兴知道。我自己总是使用第二种方法，但认为相同的对象可以工作。

另一种选择是使用 select as label for value in array 将模型绑定到 value 上的属性

Sharondio，在开始之前，我需要了解如何在 标签的“values”属性中设置自定义值？

你不能。 ng-options 创建索引。如果您使用 jonnyynnoj 的建议，它会给您 id 作为所选值，但 select 仍会将数组索引显示为值。如果您绝对需要选项值作为您的 id，您可以在选项元素上使用 ng-repeat 并按照您的意愿填充它：plnkr.co/edit/3riXsi?p=preview

【参考方案3】：

在视图中

<select ng-model="boxmodel"><option ng-repeat="lst in list" value="lst.id">lst.name</option></select>

JS：

在侧控制器中

 $scope.boxModel = 600;

【参考方案4】：

您可以使用以下代码（跟踪），

<select ng-model="modelName" ng-options="data.name for data in list track by data.id" ></select>

【参考方案5】：

这是一个老问题，您可能已经得到了答案。

我的plnkr 解释了我完成选择默认下拉值的方法。基本上，我有一个服务会返回下拉值[硬编码测试]。我无法默认选择该值，几乎花了一天时间，最后发现我应该在 script.js 文件中设置$scope.proofGroupId = "47"; 而不是$scope.proofGroupId = 47;。这是我的错，我没有注意到我设置的是整数 47 而不是字符串“47”。我保留了plnkr，以防万一有人想看。希望这会对某人有所帮助。

【参考方案6】：

<select ng-init="somethingHere = options[0]" ng-model="somethingHere" ng-options="option.name for option in options"></select>

这会得到你想要的结果，伙计：）干杯

【参考方案7】：

某些场景，object.item 不会被加载或未定义。

使用 ng-init

<select ng-init="object.item=2" ng-model="object.item"
ng-options="item.id as item.name for item in list"

【讨论】：

ng-options 正在枚举我的列表 0..10 等等，而不考虑实际的 id 值。没关系。就是这样渲染的。实际值在表单提交中传递。

【参考方案8】：

$scope.item = 
    "id": "3",
    "name": "ALL",
;

$scope.CategoryLst = [
     id: '1', name: 'MD' ,
     id: '2', name: 'CRNA' ,
     id: '3', name: 'ALL' ];

<select ng-model="item.id" ng-selected="3" ng-options="i.id as i.name for i in CategoryLst"></select>

【参考方案9】：

我们应该在下拉列表中使用名称值对绑定值。请参阅 代码了解更多

function myCtrl($scope) 
     $scope.statusTaskList = [
         name: 'Open', value: '1' ,
         name: 'In Progress', value: '2' ,
         name: 'Complete', value: '3' ,
         name: 'Deleted', value: '4' ,
    ];
    $scope.atcStatusTasks = $scope.statusTaskList[0]; // 0 -> Open 

<select ng-model="atcStatusTasks" ng-options="s.name for s in statusTaskList"></select>

【参考方案10】：

我可以帮助你处理 html：

<option value="">abc</option>

而不是

<option value="4">abc</option>

将 abc 设置为默认值。