AngularJS - 使用选择标记NG-重复添加额外的空白选项 [英] AngularJS - extra blank option added using ng-repeat in select tag
问题描述
我有,我有选择创建,使用AngularJS NG重复一个列表框。列表框正确地创建,当我选择其中一个项目,然后点击我的按钮,我得到的功能和有我需要的信息。
I have a listbox that I am creating with a select, using AngularJS ng-repeat. The listbox is created correctly, and when I select one of the items and click my button, I get to the function and have the information I need.
我的HTML code是如下:
My html code is as follows:
<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浏览器中运行期间检查列表框,我得到了在控制台下面的输出:
My problem is that when the listbox paints, it has one item at the top that is blank. When I inspect the listbox during a run in Chrome, I get the following output in the console:
<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-重复插入第一个选项。我不希望看到一个空格在列表框的顶部。我认识一个选项是设置的第一个实际的选项(值=0)作为选择的项目,但我宁愿没有选择的项目启动。
I am wondering how I can get rid of the first option inserted by the ng-repeat. I don't want to see a blank space at the top of the listbox. I realize one option would be to set the first actual option (value="0") as the selected item, but I would rather have no selected items to start.
推荐答案
您看到的任何时间&LT;?期权价值=选择=选择&GT;&LT; /选项&GT;
的选择,这意味着你的 NG-模型
设置为ISN值'T在 NG-选项
。所以,如果你不想空白选项,您需要确保项目
设置为你的 ITEMLIST $ C $价值C>。这可能是那么容易,因为在你的控制器中的以下内容:
Any time you see <option value="?" selected="selected"></option>
in the select, it means that your ng-model
is set to a value that isn't in the ng-options
. So, if you don't want the blank option, you need to make sure item
is set to a value in your itemlist
. This could be as easy as having the following in your controller:
$scope.item = $scope.itemlist[0];
这将会给它一个inital值,然后将角后更新它。
This will give it an inital value, and then angular will update it for you thereafter.
这篇关于AngularJS - 使用选择标记NG-重复添加额外的空白选项的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!