javascript - 选择下拉列表不会在数组值更改时立即更新自身

Question

我有一个选择下拉列表，它从数组中获取数据。该数组由服务器的响应填充:

myApp.controller('mController', function($scope, $routeParams, $http, contextRoot) {

    var dataObject = {}
    $scope.arr = []

    $.post(contextRoot + "/servlet", dataObject, function(dataStr) {

        var dataFromServer = $.parseJSON(dataStr);
        console.log(dataFromServer);

        if (dataFromServer["success"] == 1) {
            $scope.arr = dataFromServer["list"]
        } else {
            alert("Failure! " + dataFromServer["message"])
        }
    });

});

dataFromServer["list"] 的示例值为:

["    _alerts", "    Test2ControlDesk", "    aug15test", "    sample2", "    samplerolDesk"]

问题是下拉列表在收到响应后不会立即填充，并且需要一些时间。

html代码如下:

<select class="form-control" ng-model="selectedDataSource" ng-options="item as item for item in arr | orderBy:'toString()' " ></select>

Answer 1

似乎您使用jquery $.post从服务器获取数据，并且它超出了 Angular 知识范围，因此您必须强制 Angular 在该外部过程之后更新范围，

为此，请使用 $scope.$apply(); ajax成功后，

$.post(contextRoot + "/servlet", dataObject, function(dataStr) {

  var dataFromServer = $.parseJSON(dataStr);
  console.log(dataFromServer);

  if (dataFromServer["success"] == 1) {

    $scope.arr = dataFromServer["list"];

    $scope.$apply(); // new line

  } else {

    alert("Failure! " + dataFromServer["message"])

  }
});

这是一个很好的article关于$apply()

或BESTWAY IS

使用 Angular 内置 $http服务