通話機能は、私は、私は、エンドポイントからのJSONレスポンスを反復処理していますこのような状況を抱えている値

Question

を取得する：

コントローラコードの塊：

$http({ 
    method: 'GET', 
    url: 'http://mywebsite.com/api/v1/stores/' 
}). 
success(function(data, status, headers, config) { 
    $scope.stores = data; 
}). 
error(function(data, status, headers, config) { 
    $scope.name = 'Error!'; 
}); 

と私のhtmlにあなたは私があちこちstore.client_idを受け取る機能を使用してクライアント名を取得しようとして見ることができるように

<tbody> 
    <tr ng-repeat="store in stores"> 
     <td>{{store.name}}</td> 
     <td> {{store.type}} </td> 
     <td><span ng-repeat="client in retrieveClientName(store.client_id)"> 
       {{client.name}} 
      </span> 
     </td> 
     <td>{{store.address}}</td> 
    </tr> 
</tbody> 

：私はこれを持っているビュー側の値はの配列を格納します。通常、ng-clickでトリガされた関数を使うのは簡単ですが、私が反復処理をしている間に、これを「オンザフライ」でどのように実現できますか？ これを実行しているので、私は無限のループを得て、すべてが壊れてしまいます。ここ

は、コントローラ側でクライアント名を返す関数のコードです：

$scope.retrieveClientName = function(id) { 
    $http({ 
      method: 'GET', 
      url: 'http://mywebsite.com/api/v1/clients?client_id='+id 
     }). 
     success(function(data, status, headers, config) { 
      return $scope.clients=data; 
     }). 
     error(function(data, status, headers, config) { 
      $scope.name = 'Error!'; 
     }); 
    } 

私はまた、あなたがその$ HTTP冗談を理解する必要があり、MG-Init指令

<td ng-init="clients=retrieveClientName(store.client_id)"><span ng-repeat="client in clients">{{client.name}}</span></td> 

Answer 1

一つの方法は、あなたが戻ってstoresを取得するときにすべてのデータを取得するだろう

$http({ 
    method: 'GET', 
    url: 'http://mywebsite.com/api/v1/stores/' 
}). 
success(function(data, status, headers, config) { 
    $scope.stores = data; 
    angular.forEach($scope.stores, function(store){ 
     $scope.retrieveClientName(store.client_id).then(function(clients){ 
      store.clients = clients; 
     }); 
    }); 
}). 
error(function(data, status, headers, config) { 
    $scope.name = 'Error!'; 
}); 

---

編集：私は、なぜあなたはここで繰り返さないクリーンなコード

$scope.retrieveClientName = function(store) { // pass in store so we can attach results here 
    $http({ 
     method: 'GET', 
     url: 'http://mywebsite.com/api/v1/clients?client_id='+store.client_id 
    }). 
    success(function(data, status, headers, config) { 
     return store.clients = data; // attach result in object 
    }). 
    error(function(data, status, headers, config) { 
     $scope.name = 'Error!'; 
    }); 
} 

$http({ 
    method: 'GET', 
    url: 'http://mywebsite.com/api/v1/stores/' 
}). 
success(function(data, status, headers, config) { 
    $scope.stores = data; 
    angular.forEach($scope.stores, function(store){ 
     $scope.retrieveClientName(store); // no need .then here 
    }); 
}). 
error(function(data, status, headers, config) { 
    $scope.name = 'Error!'; 
}); 

<tbody> 
    <tr ng-repeat="store in stores"> 
     <td>{{store.name}}</td> 
     <td> {{store.type}} </td> 
     <td><span ng-repeat="client in store.clients"> <!-- use data here --> 
       {{client.name}} 
      </span> 
     </td> 
     <td>{{store.address}}</td> 
    </tr> 
</tbody 

Answer 2

を使用してみています非同期なので、すべてのng-repeatの後に応答が返ってくるので、コントローラーで$ q.allにしてからng-repeatでレンダービューを実行する必要があります。

foreachをストアで使用しforeachで配列に追加した後、この配列を$ q.allレンダリングビューの後に$ q.allで使用します。

Answer 3

retrieveClientName関数が間違っています：$ httpは約束を返し、成功コールバックの戻り値は関数の戻り値ではなく、ng-repeatを約束することはできません。

$scope.retrieveClientName = function(id) { 
    return $resource('http://mywebsite.com/api/v1/clients?client_id='+id).query(); 
} 

ngResource依存関係を忘れないようにしてください。