如何从 $http 获取数组并使用 ng-repeat 查看它

Question

我想从 return 函数中获取 JSON 对象的数组，并使用 ng-repeat 在该数组中循环，但它对我不起作用，这是我的代码：

var app=angular.module("myApp",[]);

app.controller("myController",function($scope,$http){

    $scope.listOfFields=[];

 $scope.getlistOfFieldsByIdTable = function(idTable)
    {
       $http.get("/listOfFieldsByIdTable/"+idTable)
       .success(function(data){

         return data;

       });
    };

});

<!-- first call  -->
<!-- 150 is the id of the table-->
<div class="panel-body" ng-app="myApp" ng-controller="myController">

    <ul ng-init="listOfFields = getlistOfFieldsByIdTable(150)"> 
        <li ng-repeat="field in listOfFields ">
                {{field.name}}
        </li>
   </ul>                           
</div>

<!-- second call  -->

 <div class="panel-body" ng-app="myApp" ng-controller="myController">
    <ul>
        <lib ng-repeat="field in getlistOfFieldsByIdTable(150)">
                      {{field.name}}
        </li>
   </ul>
</div>

我使用的两个调用对我不起作用，当我使用像 "Advanced Rest Client plugin in Google Chrome" 这样的 RestClient 时，我的服务工作正常你能帮我如何正确调用我的对象数组，并在我的 HTML 页面中显示结果吗？提前致谢。

Answer 1

当你在执行一些异步操作的时候，你不能return数据，所以你不得不处理回调 and/or 承诺.

例如，我们可以创建一个服务，用一个方法return一个承诺：

  function Service($http) {

      this.getData = () => {
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve([1,2,3,4,5]);
          }, 1000);
        });
      }

  }

然后像这样在控制器中使用此服务：

  function Controller($scope, Service) {

    //Initialize our list
    $scope.list = [];

    //Call our promise
    Service.getData().then((response) => {
      //After 1s, retrieve the data 
      $scope.list = response
      //Update the bindings
      $scope.$apply();
    });

  }

您可以看到 Working Plunker

Answer 2

问题出在 getlistOfFieldsByIdTable 函数上：

   //WRONG
    $scope.getlistOfFieldsByIdTable = function(idTable)
        {
           $http.get("/listOfFieldsByIdTable/"+idTable)
           .success(function(data){

             return data;
           });
        };

return data声明returns数据到.success方法里面的匿名函数。它不会 return 数据到父函数。由于在父级别未指定 return，因此值 returned 为 null。 A return 需要在嵌套的每一层都完成。

//BETTER
$scope.getlistOfFieldsByIdTablePromise = function(idTable) {

    var promise = $http.get("/listOfFieldsByIdTable/"+idTable);

    var derivedPromise = promise.then( function onfulFilled(response) {
        var data = response.data;
        //Sets scope value asynchronously
        $scope.listOfFieldsByIdTable = data;
        //return value creates derived promise
        return data;
    };

    return derivedPromise;
};

在此示例中，每个嵌套级别都有一个 return 语句，但最后一项 returned 是 不是值 ；这是一个承诺。

$http 服务只是 return 的承诺。并且附加到 promise 对象的方法仅 return promises。数据仅作为副作用进入作用域，并且操作会在将来 XHR 完成时发生。

in my ng-repeat , i should use listOfFieldsByIdTable or derivedPromise that you used in the return function?

在 ng-repeat 指令中使用 $scope.listOfFieldsByIdTable 变量。 ng-repeat 指令将 $watch 放在变量上，该变量检查每个摘要周期的变化，当数据出现（或变化）时，它会更新 DOM.

要对控制器中的数据进行额外处理，链来自派生的承诺。

如何从 $http 获取数组并使用 ng-repeat 查看它

How to Get Array from $http and view it with ng-repeat

angularjs

angularjs-ng-repeat

angular-http

angular-promise