一尘不染

AngularJS-在选择标签中使用ng-repeat添加了额外的空白选项

angularjs

我有一个使用AngularJS ng-
repeat通过选择创建的列表框。正确创建了列表框,当我选择其中一项并单击我的按钮时,我进入了该功能并获得了所需的信息。

我的html代码如下:

<select size="6" ng-model="item" ng-options="s.name for s in itemlist"></select>
<button class="btn tt-btn-blue" ng-model="singleModel" ng-click="onLoadClicked(item.id)">Load</button>

我的问题是,在绘制列表框时,它的顶部有一项是空白的。在Chrome运行过程中检查列表框时,在控制台中获得以下输出:

<select size="6" ng-model="item" ng-options="s.name for s in itemlist" class="ng-pristine ng-valid">
<option value="?" selected="selected"></option>
<option value="0">Item 1</option>
<option value="1">Item 2</option>
<option value="2">Item 3</option>
<option value="3">Item 4</option>
<option value="4">Item 5</option>
<option value="5">Item 6</option>
</select>

我想知道如何摆脱ng-repeat插入的第一个选项。我不想在列表框的顶部看到空白。我意识到一个选择是将第一个实际选项(值=“
0”)设置为选定项,但是我宁愿没有选定项开始。


阅读 352

收藏
2020-07-04

共1个答案

一尘不染

每当您<option value="?" selected="selected"></option>在选择项中看到该字词时,即表示您已将ng- model设置为不在中的值ng- options。因此,如果您不想使用空白选项,则需要确保item将设置为中的值itemlist。就像在控制器中包含以下内容一样容易:

$scope.item = $scope.itemlist[0];

这将为它提供一个初始值,然后角度将为您更新它。

2020-07-04