选择字段的空选项问题答案

【问题标题】：issues with select field's empty option选择字段的空选项问题
【发布时间】：2014-01-23 11:25:43
【问题描述】：

我们面临着选择字段的空选项的多个问题。

我的渲染代码如下：

&#60;select ng-switch-when="select" id="{{field.name}}" ng-model=data[field.name] >
&#60;option ng-repeat="option in field.options" value="{{option.value}}">{{option.description}}
&#60;/select>

在这里，我们的 UI 是动态生成的，并且选项也使用 REST API 动态填充。 Select 字段绑定到一个数据对象，该数据对象也使用最初可能具有空白值的 REST 调用填充。

问题

它会在不需要的地方自动添加一个空选项，并在选择任何非空选项后消失。
此外，少数选择字段显示以下错误

TypeError：无法调用未定义的方法“prop” 在 selectDirective.link.ngModelCtrl.$render (lib/angular/angular.js:20165:47) 在 Object.ngModelWatch (lib/angular/angular.js:16734:14) 在 Scope.$get.Scope.$digest (lib/angular/angular.js:11800:40) 在 Scope.$get.Scope.$apply (lib/angular/angular.js:12061:24) 完成后（lib/angular/angular.js:7843:45）在 completeRequest (lib/angular/angular.js:8026:7) 在 XMLHttpRequest.xhr.onreadystatechange (lib/angular/angular.js:7982:11)

我怀疑是否在 angular 中使用以下代码

function setupAsSingle(scope, selectElement, ngModelCtrl, selectCtrl) {
ngModelCtrl.$render = function() {
var viewValue = ngModelCtrl.$viewValue;

  if (selectCtrl.hasOption(viewValue)) {
    if (unknownOption.parent()) unknownOption.remove();
    selectElement.val(viewValue);
    if (viewValue === '') emptyOption.prop('selected', true); // to make IE9 happy
  } else {
    if (isUndefined(viewValue) && emptyOption) {
      selectElement.val('');
    } else {
      selectCtrl.renderUnknownOption(viewValue);
    }
  }

...

它在这一行中断

if (viewValue === '') emptyOption.prop('selected', true); // to make IE9 happy

因为空选项是 REST API 在后期提供的，直到初始渲染才可用。

请提供一些实施建议和一些替代方法。

P.S：我不能将 ng-option 与 select 一起使用，因为它会发出索引值，并且我需要实际值来进行一些 DOM 操作。

【问题讨论】：

标签： angularjs

【解决方案1】：

我会先阅读如何执行 data-ng-options (http://docs.angularjs.org/api/ng.directive:select)，因为您的选择会给您带来一些问题。以下是移动代码的方法：

<span data-ng-switch-when="select">
    <select id="{{field.name }}" data-ng-model="data[field.name]" data-ng-options="option.value as option.description for option in field.options></select>
</span>

其次，选择空白选项的原因是因为 data[field.name] 未设置为 option.value 中存在的值。您需要在控制器中设置它，以便空白选项消失。你可以在这里看到一个类似的问题：Why does AngularJS include an empty option in select?

【讨论】：