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

【问题标题】：AngularJS - Extra blank option added when i use ng-repeat in select tagAngularJS - 当我在选择标签中使用 ng-repeat 时添加了额外的空白选项
【发布时间】：2016-04-02 00:13:53
【问题描述】：

在 ng-repeat 中使用时，我在选择选项卡上遇到了一些问题。在 Stackoverflow 上，我找到了许多与我的问题相关的解决方案，但我无法解决我的问题。

这是我的代码.. 在页面顶部我定义了我的控制器

<ion-view view-title="Product" ng-controller="productCtrl as pd">

在控制器上

self.pdata = response;

在 html 页面上我的代码是..

<div ng-if="pd.pdata.optionid.length > 0" class="prodetail" ng-repeat="x in pd.pdata.optionid">
    <h5>{{x.title}}</h5>
    <select name="{{x.title}}" ng-model="pd[x.title]" style="right:5px;">
      <option ng-repeat="y in pd.pdata.optionvalue[x.option_id]" value="{{y.value_id}}" selected>{{y.title | uppercase}}</option>
    </select>
</div>

我的选择选项卡在 ng-repeat 循环中这样每次我的 ng-model 都是动态定义的。

我的问题是：-在选择标签中使用 ng-repeat 添加了额外的空白选项

【问题讨论】：

如果你想摆脱空白选项。选择控制器中的第一项。有关详细信息，请参阅此答案：stackoverflow.com/questions/12654631/…
正如我已经说过的......我的选择选项卡是动态创建的。那么我如何为 ng-model 赋值？
你陈述了你的问题，但不是你想要达到的目标。您是否总是希望第一个选项以选定的方式开始？
@SureshRatten 你可以使用ng-init 来初始化你的ng-model 这样你就不会在下拉列表中得到一个空值。
Why does AngularJS include an empty option in select?的可能重复

标签： angularjs html ionic-framework hybrid-mobile-app

【解决方案1】：

像这样修改你的select标签，这有点拗口，但你也可以保留你的option标签并从我的select标签中删除ng-options。

<select ng-init="pd[x.title] = pd[x.title] || pd.pdata.optionvalue[x.option_id][0].value_id" name="{{x.title}}" ng-model="pd[x.title]" style="right:5px;" ng-options="y.value_id as y.title.toUpperCase() for y in pd.pdata.optionvalue[x.option_id]">
</select>

这是jsFiddle

【讨论】：

是的，它对我有帮助，但我无法显示选定的第一个选项。
我已经为 Array 默认情况下的第一个选项完成了它，但是例如，如果您想保留此更改..就像 pd[x.title] 已经初始化时一样那个选项在那里

【解决方案2】：

使用硬编码的空值

<option value="" ng-if="false"></option>

【讨论】：

【解决方案3】：

最初的问题似乎在这里

value="{{y.value_id}}"

【讨论】：

:-( :-( :-( :-( :-( :-(