javascript - 在指令中使用异步进行 Angular Select

Question

尽我所能，我无法获得异步完全工作的 Angular 选择。我可以让它大部分工作 - 但不是全部。

想象 Controller 看起来像:

 $scope.stuff = {};
 $scope.stuff.blah = "SOME_KEY";
 External.list().then( function (data ) {
   $scope.stuff.sourceSystems =data; 
 });

然后这可以很好地显示值

 <select ng-model="stuff.blah">
 <option ng-repeat="(key, value) in stuff.sourceSystems | orderBy" value="{{key}}">{{key}}</option>
 </select>

但是由于某种原因，这在开始时有一个额外的空白选择:

<select ng-model="stuff.blah" ng-options="key for (key, value) in stuff.sourceSystems | orderBy"></select>

但是 - 在这两种情况下都不是我设置为 SOME_KEY 的现有值 - 被选中。在第一种情况下，选择列表中的第一个值 - 在第二种情况下，选择空白值。在这两种情况下 - 底层绑定(bind)值都是 SOME_KEY。然而 - 一旦我实际更改所选值，通过将其下拉 - 绑定(bind)值(废话) - 正确更改。

这是一个将 bindToController 设置为 true 的指令。

我做错了什么？

Answer 1

$scope.stuff.blah <- 有字符串键

,在 ng-repeat 中，重复值是对象(包括 Angular 哈希键)

try this, and read ng-options

 <select ng-model="stuff.blah" ng-options="system.key as system.key for system in stuff.sourceSystems | orderBy">
 </select>