AngularJS

Question

我在 ng-repeat 中使用 select 选项卡时遇到一些问题。在 Whosebug 上，我发现了很多与我的问题相关的解决方案，但我无法解决我的问题。

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

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

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

我的问题是：-在 select 标签

中使用 ng-repeat 添加了额外的空白选项

Answer 1

最初问题似乎出在这里

value="{{y.value_id}}"

在此处查看更多内容The empty option is generated when a value referenced by ng-model doesn't exist in a set of options passed to ng-options

Answer 2

使用硬编码的空值

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

Answer 3

像这样修改你的 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

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

AngularJS - Extra blank option added when i use ng-repeat in select tag

html

hybrid-mobile-app

ionic-framework