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

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

return this.getGrid( gridId ).all( by.repeater('(rowRenderIndex, row) in  rowContainer.renderedRows track by $index') ).map(function(row, index){
        return {
            index: index,
            row: row,
            id: row.evaluate('row.entity.id') 
        };                
    }).then(function(maps){            
        return maps.find(function(e){
            return e.id === rowId;                   
        });  
    });

并将其称为：

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);
    });
}

请参阅this edited plunker

另请注意，我已将function populateStats(){ for (var i = 0; i < $scope.pokemonPair.length; i++){ getStats(i); } }属性更改为对象数组，以便能够向其添加属性并使用pokemonPair。

Answer 2

你必须阅读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.
});

Answer 3

这是一个工作的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);
        });
    }

在Pokeapi中使用ng-repeat

3 个答案: