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

Posted 2023-03-11

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

【英文标题】：AngularJS - extra blank option added using ng-repeat in select tag

【发布时间】：2013-03-07 11:02:11

【问题描述】：

我有一个使用 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 插入的第一个选项。我不想在列表框顶部看到空白区域。我意识到一个选项是将第一个实际选项 (value="0") 设置为选定项，但我宁愿没有选定项开始。

【参考方案1】：

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

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

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

【讨论】：

但是用户会认为他选择了一些东西，但事实并非如此。如果您使用默认 html，则选项列表中没有空白选项，如果您设置 size > 1，则不会选择任何内容。

默认的 HTML 是什么意思？

我同意@Sebastian。很多时候你希望页面加载时没有任何可见的东西，这将使用户默认选择某些东西。

最初的问题是如何防止出现空白选项（即默认选择某些内容），这回答了这个问题。如果您确实希望默认显示空白选项，请不要为您的模型设置初始值。

没有原来的问题仍然问“如何摆脱由角度添加的空白选项”。您仍然没有摆脱空白选项，您只是将模型设置为某个值。用户仍未选择哪个。我不明白为什么你的答案应该是正确的。还是您更喜欢让 *** 为每个用户选择投票，直到他选择投票？不，你不...

【参考方案2】：

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

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

【参考方案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);
            );

);