选择下拉列表不会在数组值改变时立即更新

Select dropdown doesn't update itself immediately on change of value of array

本文关键字：改变 更新 数组 下拉列表 选择      更新时间：2023-09-26

我有一个选择下拉菜单，从数组中获取数据。这个数组由server的响应填充:

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>

似乎你使用jquery $.post从服务器获取数据，这是angular知识之外的东西，所以你必须强迫angular在外部进程之后更新作用域，

在ajax成功后使用$scope.$apply();，如

$.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"])
  }
});

这里有一篇关于$apply()的好文章

或BESTWAY IS

使用angular自带的$http服务

相关文章：