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>，则表示您的ng-model设置为不在ng-options中的值。因此，如果您不想要空白选项，则需要确保将item设置为itemlist中的值。这可以像在控制器中使用以下内容一样简单：

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

这将给它一个初始值，然后angular会为你更新它。

Answer 2

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

＆＃13;

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

＆＃13;

Answer 3

我在很长的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);
            });

}）;

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

3 个答案: