Question

我正在使用angular 1.4.12，我需要在我的应用程序中选择一个菜单。我正在使用ng-options和从异步函数填充的对象数组，但SELECT没有看到更新，之后仍然是空的。我试过“追踪”，但它不起作用。有什么建议？谢谢！

Answer 1

这里有几个问题

首先，ng-options上的选择器比简单绑定更复杂。

其次，在使用angular进行开发时，尽量避免使用setTimeout。由于称为摘要周期的过程，Angular绑定知道要更新。在此过程中，将评估绑定并检查更改。这个过程是从角度内部触发的，它发生了很多。

然而问题是setTimeout，因为它不是角度的一部分，不会触发摘要。因此，您的选项框上的绑定永远不会更新。为了解决这个问题，angular提供了自己的超时助手。 $超时。

请参阅更新的fiddle以获取有效的解决方案。

ng-options需要更新为类似的东西。您可以阅读有关ng-options here

的更多信息

<select ng-options="item.subItem.label for item in items" ng-model="model">
</select>

由于上述原因，您的控制器需要注入$ timeout

function MyCtrl($scope, $timeout) {
    $scope.name = 'Try';
    $scope.items = [];
    $scope.model = {};

    $timeout(function() {
      $scope.items = [
        {subItem: {value: "a", label: "1"}},
        {subItem: {value: "b", label: "2"}},
      ];
      alert($scope.items.length);
    }, 2000);
}

更新：如下面的评论中所述，使用具有自己的异步操作的外部库可能会导致出现角度消化问题。一个简单的解决方案是使用angulars promise library，$ q。我已经更新了小提琴手，以包含一个这样的例子。 Click here to see it

更新的代码如下

function MyCtrl($scope, $q, $timeout) {
    $scope.name = 'Try';
    $scope.items = [];
    $scope.model = {};

    function myPromise(){
        var deferred = $q.defer();

        //Do your pouchDB request here and then call resolve in the pouchDB callback
        $timeout(() => {
            deferred.resolve("This would be your results object");
        }, 2000)

        return deferred.promise;    
    }

    myPromise().then((results) => {
          $scope.items = [
          {subItem: {value: "a", label: "1"}},
          {subItem: {value: "b", label: "2"}},
        ];
        alert(results);
    });
}

当ng-options模型更新时，Angular ng-options不会更新选择列表

1 个答案: