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

时间:2016-04-03 12:56:17

标签: angularjs angularjs-ng-repeat angular-promise angular-http

我想从返回函数中获取一个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页面中显示结果, 谢谢你提前。

2 个答案:

答案 0 :(得分: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函数中使用的listOfFieldsByIdTablederivedPromise

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

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

答案 1 :(得分:0)

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

例如,我们可以使用返回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