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

Question

我使用AngularJS ng-repeat创建了一个使用select创建的列表框.列表框是正确创建的,当我选择其中一个项目并单击我的按钮时,我会进入该功能并获得我需要的信息.

我的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")设置为所选项目,但我宁愿没有选定的项目可以启动.

Answer 1

您<option value="?" selected="selected"></option>在select中看到的任何时候都表示您ng-model的值设置为不在的值ng-options.因此,如果您不想要空白选项,则需要确保item将其设置为您的值itemlist.这可能就像在控制器中具有以下内容一样简单:

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

这将给它一个初始值,然后angular将为你更新它.

Answer 2

确保通过angular隐藏自动添加选项的最简单方法是ng-if指令.

<select ng-options="option.id as option.description for option in Options">
    <option value="" ng-if="false"></option>
</select>