AngularJS：顯示一個通過HTTP GET（從REST服務）檢索的JSON數據中的選擇框

Question

我有一個REST服務，它返回一個json字符串，它只是一組字符串（我使用Gson生成了此字符串（Gson.toJson（mySetOfStrings）））

所以我已經添加到我的index.html中：

<div ng-controller="ListOptionsCtrl">
  <form novalidate>
    <button ng-click="refreshList()">refresh</button>
    <select name="option" ng-model="form.option" ng-options="o.n for o in optionsList></select>
  </form>
</div>

在我的腳本中：

var ListOptionsCtrl = function ListOptionsCtrl($scope, $http) {
  $scope.refreshList = function() {
    $http({ 
      method: 'GET'
      url: '*someurl*'
    }).
      success(function(data) {
        $scope.optionsList = angular.fromJson(data);
    });
  };
}

不幸的是，在我的選擇框中產生的所有內容都是一個空列表。 當我看到對GET請求的響應是什么時，它將返回一個包含內容的json字符串，因此我看不到為什么沒有向此元素添加任何內容。 我在這里做錯了什么？ 謝謝

Answer 1

這是因為Angular尚不知道您所做的更改。 因為Angular允許將任何值用作綁定目標。 然后在任何JavaScript代碼結尾處，檢查該值是否已更改。

您需要使用$ apply

var ListOptionsCtrl = function ListOptionsCtrl($scope, $http) {
  $scope.refreshList = function() {
    $http({ 
      method: 'GET'
      url: '*someurl*'
    }).
      success(function(data) {
        $scope.$apply(function () {
            $scope.optionsList = angular.fromJson(data);
        });
    });
  };
}

嘗試這個。

吉姆·霍斯金斯 （ Jim Hoskins）的帖子中提供了有關其工作原理以及為什么需要它的更多信息

Answer 2

在執行$ apply之前，應先執行if（！$ scope。$$ phase）{...}，以檢查$ digest錯誤。

success(function(data) {
     if(!$scope.$$phase) {
        $scope.$apply(function () {
            $scope.optionsList = angular.fromJson(data);
        });
      }
    });