如何在Angular中遍歷$ http.get？

Question

所以我正在使用API​​（寵物小精靈api）來獲取寵物小精靈的信息。

我已經成功致電信息，但是我不確定如何獲得一項的倍數。

例如，

$http.get("http://pokeapi.co/" + data.abilities[0].resource_uri)
            .success(function(data){
              console.log(data.name)
              $scope.ability = data;
            })

在這里，我不得不訴諸於在abilities數組（帶有[0]）中指定哪個對象，但是我希望能夠獲得所有可用的能力。

我應該使用for in循環嗎？ 如果是這樣，我可以在.success中執行此操作，並輸出在html文件中找到的內容嗎？ 例如有

<p>{{ability.name}}</p>

輸出2或3個名稱，而不是1。

Answer 1

這將檢索api中每個神奇寶貝的每個屬性名稱，並將其顯示在ng-repeat中。

jsFiddle：

http://jsfiddle.net/chrislewispac/z5aytdLs/

<div ng-app>
<div ng-controller="PromiseCtrl">
    <p></p>
    <p ng-repeat="name in pokeAttrNames">{{name}}</p>
</div>
</div>

function PromiseCtrl($scope, $http) {
$scope.pokeAttrNames =[];   

$http.get('http://pokeapi.co/api/v1/pokedex/1/')
     .then(function(result){
           result.data.pokemon.forEach(function(poke){
              $http.get('http://pokeapi.co/' + poke.resource_uri)
                   .then(function(value) {
                       $scope.pokeAttrNames.push(value.data.name);
                    });
            });
       });   
}

Answer 2

通過添加$ resource並在控制器的工廠中調用方法，可以使代碼更簡潔一些，我添加的只是一個for循環，可以執行每個請求。

  MyApp.controller('PromiseCtrl', function ($scope, $http, yourResource) { 

             for(var i in data.abilities) {
                 yourResource.save({abilities_uri: data.abilities[i].resource_uri}, function (response) {
                     console.log(data.abilities[i].resource_uri)
                    $scope.ability = data;
                 };
    }).factory('yourResource', ['$resource', function ($resource) {
              return $resource('http://pokeapi.co/:abilities_uri', {} {
                    'get': {
                      method: 'GET',
                      headers: {"Content-Type": "application/json"}
                    }
                  });
              }]);
    }

PD：這可能需要調整，例如您的$ scope.ability應該是一個數組