$ httpから配列を取得してng-repeatで表示する方法

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> 

私が使用した2つのコールが私のために働いていない私は「GoogleのChromeの拡張休憩クライアントプラグイン」のような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サービスは約束を返します。そして、約束オブジェクトに付けられたメソッドは、約束を返すだけです。 XHRが完了すると、データは副作用としてのみスコープ上に入り、操作は将来行われます。私のNGリピートで

---

、私はあなたがリターン機能で使用listOfFieldsByIdTableまたはderivedPromiseを使用する必要がありますか？

ng-repeatディレクティブでは、$scope.listOfFieldsByIdTable変数を使用します。 ng-repeatディレクティブは、ダイジェストサイクルごとに変更を確認する変数に$watchを置き、データが表示（または変更）されるとDOMを更新します。

コントローラ内のデータの追加処理を行うには、チェーン派生の約束から。

Answer 2

あなたには、いくつかの非同期操作を実行している場合、あなたはリターンデータすることはできません、あなたはコールバックおよび/または約束との取引に持っているので。

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