Question

我有一个存储的项目值（在本地存储中），但每次都从服务器加载项目集合 - 不需要将它存储在客户端。从服务器加载项目集合时，我希望我的存储项目显示在下拉列表中。这是我所拥有的简化版本：

控制器：

angular.module("myApp", [])
    .controller("DemoCtrl", function($scope, $timeout) {
        $scope.items = [];
        $scope.item = "Two";
        $timeout(function() {
            $scope.items = ["One", "Two", "Three"];
    }, 1000);
});

标记：

<body ng-app="myApp">
    <div ng-controller="DemoCtrl"> 
        <select ng-model="item" ng-options="item for item in items">
            <option value="">---</option>
        </select>
        {{ item }}
    </div>
</body>

小demo你可以看到，在1秒延迟后，该值不会显示在下拉列表中 - 只是一个空格。我看过标记，似乎没问题：

...
<option value="1" selected="selected" label="Two">Two</option>
...

因此选择了该值，但由于某种原因而没有显示。

我尝试使用不同版本的Angular，看起来这种行为出现在1.3.XXX版本中：之前的（1.2）和下一个版本（1.4-beta）工作正常。

我不想降级到1.2，1.4仍处于测试阶段，所以我已经找到了解决方法 - 如果我稍微更改ng-options：

ng-options="item for item in items track by item"

它开始正常工作。但我仍然想知道，这种奇怪行为的原因是什么。

Answer 1

等待设置所选项目，直到填充数组为止：

angular.module("myApp", [])
.controller("DemoCtrl", function($scope, $timeout) {
    $scope.items = [];
    $timeout(function() {
        $scope.items = ["One", "Two", "Three"];
        $scope.item = "Two";
    }, 1000);
});

如果项目加载超时，则不显示ng-options中的选定项目

1 个答案: