47

我有一个使用 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”）设置为选定项目，但我宁愿没有选定项目开始。

4

3 回答 3

77

每当您<option value="?" selected="selected"></option>在选择中看到时，这意味着您ng-model被设置为不在ng-options. 因此，如果您不想要空白选项，则需要确保item将其设置为itemlist. 这可能就像在控制器中包含以下内容一样简单：

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

这会给它一个初始值，然后 Angular 会在之后为你更新它。

于 2013-03-18T22:32:22.103 回答
10

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

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

于 2015-07-22T09:41:35.703 回答
1

经过长时间的 RND，我找到了解决方案 请找到以下代码，它将为您工作。

这是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);
            });

});

于 2017-04-18T11:48:20.933 回答