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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (632)

我有一个使用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>
提问于
用户回答回答于

,你需要确保item在你的设置中设置一个值itemlist。这可能与控制器中的以下内容一样简单:

$scope.item = $scope.itemlist[0];
用户回答回答于

最简单的方法来确保AngularJS自动添加选项。

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

扫码关注云+社区

领取腾讯云代金券