Question

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

我的渲染代码如下：

&#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） at 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） at completeRequest（lib / angular / angular.js:8026：7）在XMLHttpRequest.xhr.onreadystatechange（lib / angular / angular.js：7982：11）

我怀疑是否使用角度

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，因为它会发出索引值，我需要一些DOM操作的实际值。

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

选择字段的空选项出现问题

1 个答案: