Question

我有一个选择：

<select name="dateFields.month" data-ng-model="dateFields.month" placeholder="Month" class="form-control" ng-change="checkDate()" ng-disabled="disableFields">
   <option ng-show="!dateFields.month" value="" translate="yes">#Apply.Month</option>
   <option ng-repeat="month in months" value="{{month.value}}" ng-selected="month.value == dateFields.month">{{month.name | translate}}</option>
</select>

ng-repeat循环遍历此数组：

this.months = [
  { value: 1, name: '#Common.January' },
  { value: 2, name: '#Common.February' },
  { value: 3, name: '#Common.March' },
  { value: 4, name: '#Common.April' },
  { value: 5, name: '#Common.May' },
  { value: 6, name: '#Common.June' },
  { value: 7, name: '#Common.July' },
  { value: 8, name: '#Common.August' },
  { value: 9, name: '#Common.September' },
  { value: 10, name: '#Common.October' },
  { value: 11, name: '#Common.November' },
  { value: 12, name: '#Common.December' }
];

加载页面时，如果未设置dateFields.month，则显示默认选项：

<option ng-show="!dateFields.month" value="" translate="yes">#Apply.Month</option>

当设置dateFields.month时，上面的选项是不可见的，但我得到了这个幻影选项突然出现：

<option value="? number:1 ?"></option>

我怀疑是因为dateFields.month等于值1而不是{ value: 1, name: '#Common.January' }但不确定如何解决这个问题，因为angular应该处理对数组和选择的绑定？

我尝试将ng-model绑定到dateFields.month.value，但这不起作用。我收到错误：Cannot create property 'value' on number '1'

注意：我有一些其他类似构造的选择，它们的行为正确。只有这一个做到了。

更新

我们有一个插件

https://plnkr.co/edit/xIdJ9tFSrcWQ4bKmUvX9?p=preview

Answer 1

您可以使用ng-model并将其绑定到dateFields.Month来简化代码。由于dateFields.month仅代表month.value而不是整月对象，因此您需要在ng-options中反映出来，您可以使用它而不是ng-repeat。

<select name="dateFields.month" ng-model="dateFields.month" ng-options="month.value as month.name | translate for month in months" placeholder="Month" class="form-control" ng-change="checkDate()" ng-disabled="disableFields">
  <option value="" translate>#Apply.Month</option>
</select>

<强>更新

这是一个plunk翻译工作。

Answer 2

您可以将默认选项“＃Apply.Month”的值设置为“0”来处理它，并且在初始化控制器时将“dateFields.month”指定为“0”。这将解决您的问题

选择在Angular中插入随机幻像选项

更新

2 个答案: