在 Pokeapi 中使用 ng-repeat

Question

我正在尝试从Pokéapi 获取两个随机神奇宝贝的数据。我可以很好地获取数据，但是我的角度 $scope 变量正在用第二个神奇宝贝覆盖第一个神奇宝贝，而不是同时存储两者：

$http.get(endPoint)
    .then(function(res){
        $scope.pokemonName = res.data.name; // only one 'pokemonName' in $scope
});

您可以直观地看到神奇宝贝正在加载和显示不正确（两个相同的神奇宝贝，而不是两个不同的神奇宝贝）in this Plunker example。

我可以手动声明两个单独的 $scope 变量，例如：

$scope.pokemonNameOne;
$scope.pokemonNameTwo;

但我想在 HTML 标记中使用 ng-repeat，如下所示：

<div class='pokemon' ng-repeat="pokemon in pokemonPair">
    <h2 class='name'>{{ pokemonName }}</h2>
    <img src='{{ pokemonImage }}' />
    <!-- etc -->
</div>

我觉得我应该做的就是循环访问 API 中的所需数据，然后将其推送到我自己创建的新数组中，然后将我的新数组与 ng-repeat 结合使用以显示两个随机的宝可梦。但是，我不确定这是否是一个过于复杂的解决方案。我真的应该在我自己的数组中重新创建 API 数据吗？感觉就像是在重新发明轮子。但是，除了“不要使用 ng-repeat”之外，我不确定如何解决这个问题，如果我能提供帮助，我不想走这条路，因为我正在尝试学习 Angular。

我应该将 API 数据推送到我自己制作的数组中以便正确显示，还是有更聪明的方法来使用 ng-repeat？

Answer 1

您正在替换现有变量，而不是将其推送到数组中。做这样的事情：

function getStats(pokemonIndex){
    var pokemon = $scope.pokemonPair[pokemonIndex];
    $http.get(pokemon.endPoint)
        .then(function(res){
            pokemon.pokemonName = res.data.name;
            pokemon.pokemonExperience = res.data.base_experience;
            pokemon.pokemonImage = res.data.sprites.front_default;
            pokemon.pokemonStats = res.data.stats;

            console.log("pokemonName = " + pokemon.pokemonName);
    });
}

然后这样称呼它：

function populateStats(){
    for (var i = 0; i < $scope.pokemonPair.length; i++){
        getStats(i);
    }
}

见this edited plunker

还请注意，我已将 pokemonPair 属性更改为对象数组，以便能够向其中添加属性并使用 ng-repeat。

Answer 2

这是一个有效的 plunker： https://plnkr.co/edit/c5seK6wr8rQjMAj5GZA9?p=preview

只需将来自 api 的响应推送到一个数组中，然后从那里数据绑定所有内容！

function getStats(endPoint){
        $http.get(endPoint)
          .then(function(res){
            $scope.pokemons.push(res.data);
            console.log("pokemonName = " + $scope.pokemonName);
        });
    }

Answer 3

您必须阅读 JavaScript 中的数组。您的问题实际上与 Angular 本身无关。

    $scope.pokemonNames = [];
    $http.get(endPoint)
    .then(function(res){
        var pokemon = {};
        pokemon.name = res.data.name;
        pokemon.attribute = res.data.attribute;
        $scope.pokemonNames.push(pokemon); // then iterate over pokemonNames array in ng-repeat.
});