摆脱选择标签中的空白条目答案

【问题标题】：Get rid of blank entry in select tag摆脱选择标签中的空白条目
【发布时间】：2015-09-08 08:41:03
【问题描述】：

我有许多项目从 Json 对象中获取数据并使用 angular 填充它。

<select ng-model="MyCtrl.cargoList">
    <option ng-repeat="cargo in MyCtrl.cargoList">{{ cargo.name }}</option>
</select>

每当我加载表单时，我都会在控制台中看到类似的内容：

<select ng-model="MyCtrl.cargoList">
    <option value="? object:25 "?></option>
    <option value="">Gloves</option>
    <option value="">Jacket</option>
    <option value="">Shoes</option>
</select>

我可以让这些值看起来很好，但我似乎无法摆脱第一个选项。我不介意选择框显示列表中的第一个元素，但我不希望它是空行。我该如何摆脱它？

【问题讨论】：

使用 ng-options 代替 ng-repeat
没用。我遇到了和这个人完全相同的问题：
stackoverflow.com/questions/15488181/…
您可以初始化 ng-repeat，但同样，您应该使用 ng-options，请参阅下面的答案

标签： javascript arrays angularjs select

【解决方案1】：

使用 ng-options 代替 ng-repeat

 <select ng-model="MyCtrl.selectedListItem" ng-options="cargo for cargo in MyCtrl.cargoList"></select>

如果您愿意，可以进一步微调标签/值，请查看此处的文档 - https://docs.angularjs.org/api/ng/directive/ngOptions

您可以使用 ng-init，或将第一个值设置为默认值，例如

MyCtrl.selectedListItem = MyCtrl.cargoList[0]

所以如果你想要一个函数来检测你已经改变了选择的值，你可以像这样使用 ng-change：

<select ng-model="MyCtrl.selectedListItem" ng-options="cargo for cargo in MyCtrl.cargoList" ng-change="selectChanged"></select>

在你的控制器中

$scope.selectChanged = function(){
 //apply your logic
};

【讨论】：

对于那些不赞成投票的人，我该如何改进？
不是投反对票而是重读MyCtrl.cargoList = MyCtrl.cargoList[0]
@ajmajmajma 我反对。你的ng-model 和MyCtrl.cargoList 一样
假设我需要为每个选项点击一次。那我该怎么做呢？
@MilesPeterson 为什么要使用 ng-click？通常，您只需在选择本身上使用 ng-change 。当您更改所选值时，ng-change 会触发您链接到的任何函数。

【解决方案2】：

ng-init="MyCtrl.selectedCargo=MyCtrl.cargoList[0].name" 和ng-model 上默认需要选择第一个选项，名称不应与cargoList 的名称相同。

标记

<select ng-model="MyCtrl.selectedCargo" ng-init="MyCtrl.selectedCargo=MyCtrl.cargoList[0].name">
    <option ng-repeat="cargo in MyCtrl.cargoList" value="cargo.name">{{ cargo.name }}</option>
</select>

Demo Plunkr

【讨论】：

我不确定如何，但您的解决方案有效。非常感谢。

【解决方案3】：

使用ngOption<option>

ngOptions 属性可用于使用通过评估ngOptions 理解表达式获得的数组或对象为<select> 元素动态生成<option> 元素列表。

我使用了以下表达式

数组中值的标签

HTML

<select ng-model="MyCtrl.cargo" ng-options="cargo.name for cargo in MyCtrl.cargoList">
</select>

并在您的控制器中将模型值设置为列表的第一个元素

this.cargo = this.cargoList[0]

另外注意：你可以使用MyCtrl.cargoList作为模型以及数组所以你应该使用另一个变量来保存模型值。

【讨论】：