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

我有一个使用AngularJS ng-repeat创build的列表框。 列表框是正确创build的，当我select其中一个项目，然后单击我的button，我到达函数并获得我需要的信息。

我的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> <option value="?" selected="selected"></option> ，这意味着你的ng-model被设置为一个不在ng-options 。 所以，如果你不想要空白选项，你需要确保item在你的item中设置一个值。 这可以像在控制器中一样简单：

 $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> 

Answer 3

我已经find了一个很长的RND后的解决scheme请find下面的代码它会为你工作。

这是HTML代码

 <div class="col-xs-3" ng-controller="GetUserADDetails"> <label>Region</label> <select id="DDLRegion" ng-model="selectedregion" class="form-control" ng-change="getBranched(selectedregion)"> <option value="" >--Select Region--</option> <option ng-repeat="region in Regions" value="{{region.LookupID}}">{{region.LookupValue}}</option> </select> </div> 

这是模块代码

 var app = angular.module("UserMasterModel", []) .controller("GetUserADDetails", function ($scope, $http,$log) { $http({ method: 'GET', url: '/UserMaster/GetAllRegion' }) .then(function (response) { $scope.Regions = response.data; //$log.info(response); }); 

}）;