Question

我想从返回函数中获取一个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>

我使用的两个调用对我不起作用，当我使用像“Chrome Chrome中的高级Rest客户端插件”之类的RestClient时，我的服务工作正常你能帮助我如何正确调用我的对象数组，并在我的HTML页面中显示结果，谢谢你提前。

Answer 1

问题在于getlistOfFieldsByIdTable功能：

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

             return data;
           });
        };

return data语句将数据返回到.success方法内的匿名函数。它不会将数据返回到父函数。由于在父级别未指定返回，因此返回的值为null。需要在嵌套的每个级别都进行返回。

//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语句，但返回的最终项目是而不是值;这是一个承诺。

$http服务仅返回承诺。附加到promise对象的方法只返回promise。数据仅作为副作用进行，并且当XHR完成时，操作在中发生。

在我的ng-repeat中，我应该使用你在return函数中使用的listOfFieldsByIdTable或derivedPromise？

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

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

Answer 2

当您执行某些异步操作时，您无法返回数据，因此您必须处理回调和/或承诺

例如，我们可以使用返回promise的方法创建服务：

  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

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

2 个答案: