Question

我的应用程序有这个HTML：

<select id="contentTypeSelect"
   ng-change="home.configChanged(true)"
   ng-model="ctrl.configService.admin.contentTypeId"
   ng-options="item.id as item.name for item in content"></select>

以下是内容的价值：

var content = 
[{"id":0,"name":"*"},
 {"id":1,"name":"Menu"},
 {"id":2,"name":"Service"},
 {"id":3,"name":"Help"},
 {"id":4,"name":"Product"},
 {"id":5,"name":"Version"},
 {"id":6,"name":"Exam"},
 {"id":7,"name":"Track"}]

我的问题是它创建了一个带有空白条目的选择：

<select id="contentTypeSelect" 
   ng-change="home.configChanged(true)" 
   ng-model="ctrl.configService.admin.contentTypeId" 
   ng-options="item.id as item.name for item in content" 
     class="ng-pristine ng-untouched ng-valid">
   <option value="? string: ?">
   </option><option value="0" selected="selected">*</option>
   <option value="1">Menu</option>
   <option value="2">Service</option>
   <option value="3">Help</option>
   <option value="4">Product</option>
   <option value="5">Version</option>
   <option value="6">Exam</option>
   <option value="7">Track</option>
</select>

有人可以帮我解释为什么这行在HTML中：

<option value="? string: ?">

以下是我填充选择数据的方法：

self.content = results[2];
self.configService.admin.contentTypeId = self.content[0].id;

首先，我在self.content中填充数据，然后将模态设置为该数组的第一个元素的id。

请注意，这只是1.3版本的问题。我没有看到测试版的这个问题。

> @license AngularJS v1.3.0-beta.8 // This release is working for me
> @license AngularJS v1.3.0-rc.3   // This release is working for me
> @license AngularJS v1.3.0-rc.5   // This release is working for me
> @license AngularJS v1.3.0        // This release is failing for me

我现在假设此更改是rc5与生产版本之间进行以下更改的结果：

1.3.0 superluminal-nudge (2014-10-13)
Bug Fixes
select:
add basic track by and select as support (addfff3c, #6564)
manage select controller options correctly (2435e2b8, #9418)

我会调查一下。希望错误修复不会引入我面临的新错误。当然，我的代码现在似乎适用于1.3.0之前的所有版本

请注意我的申请的运作顺序。

a）打开HTML b）获取选择列表的数据（需要5秒） c）填充ng-options d）填充ng-model

这可能是与1.3.0版本发布之前添加的错误修复相关的问题。我的相同代码已经工作了一年，并且突然只在最新的1.3.0版本中给我这个问题。

Answer 1

此附加选项是默认情况下未选择任何项目的结果。如果您将ctrl.configService.admin.contentTypeId设置为您选择一个项目列表中的有效ID，您将不再看到带有值的附加选项？

因此，这可能是由于未定义任何选择或存在错误而无法确定所选项目

<强>更新
我将AngularJS版本更改为1.3，它仍然按预期运行

<强> UPDATE2：
最终你应该通过调用$ scope.apply（）来传播self.configService.admin.contentTypeId的新值吗？

<强> UPDATE3：
添加了一个异步函数，用于模拟从服务中获取数据如果没有调用$ apply（），Angular就无法知道任何$ scope值已经改变，因为没有可以触发更新的事件。所以你必须告诉Angular你改变了一些价值。如果删除$ apply（）调用，则可以看到这一点，然后事件中的简单消息文本不会更新。

<强> UPDATE4：
将setTimeout更改为$ timeout，因此不需要$ apply（）.Yoshi解释说。

示例：

var myApp = angular.module('myApp', []); myApp.controller('MyCtrl', function ($scope, $timeout) { $scope.status = 'loading...'; $scope.getData = function () { $timeout(function () { $scope.selectedItem = 0; $scope.content = [{ "id": 0, "name": "*" }, { "id": 1, "name": "Menu" }, { "id": 2, "name": "Service" }, { "id": 3, "name": "Help" }] $scope.status = 'Call done!'; }, 1000); }; });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script> <div ng-app="myApp"> <div ng-controller="MyCtrl" ng-init="getData()"> <label>Status: {{status}}</label><br/> <select ng-model="selectedItem" ng-options="item.id as item.name for item in content"></select> </div> </div>

Answer 2

这似乎是v1.3.0的已知错误（请参阅：https://github.com/angular/angular.js/issues/9714和https://github.com/angular/angular.js/issues/9691）。

错误是由ngOptions模型数据的异步分配以及使用 falsy 标识符预先选择值（例如''或{{1} }）。它可以复制如下：

＆＃13;

(function (app, ng) {
  'use strict';

  app.controller('AppCtrl', ['$timeout', function($timeout) {
    var vm = this;

    $timeout(function () {
      vm.content = [
        { id: 0, name: 'A' },
        { id: 1, name: 'B' },
        { id: 2, name: 'C' }
      ];
    }, 1000);
  }]);
}(angular.module('app', []), angular));

＆＃13;

在移动中修复</select>错误后，从最终的1.3 rc移动到1.3.0 - <select>选项问题

2 个答案: