Question

我有许多项目从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>

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

Answer 1

您需要在ng-init="MyCtrl.selectedCargo=MyCtrl.cargoList[0].name"＆amp;上默认选择第一个选项。 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

Answer 2

使用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，或将第一个值设置为defualt，例如

MyCtrl.selectedListItem = MyCtrl.cargoList[0]

因此，如果你想要一个函数来检测你已经改变了你将使用ng-change的select的值，如下所示：

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

在您的控制器中

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

Answer 3

使用ngOption <option>

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

我使用了以下表达式

数组中值的标签

HTML 的

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

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

this.cargo = this.cargoList[0]

另请注意：您可以使用MyCtrl.cargoList作为模型以及数组。因此，您应该使用另一个变量来保存模型值。

摆脱选择标记中的空白条目

3 个答案: