獲取另一塊數據

當按鈕Load More單擊時，我想加載另一個列表塊。在這個階段，一大塊加載列表替換了現有的加載列表。這是codepen鏈接http://codepen.io/shaolin_monk/pen/PNWoQG?editors=1000。
關於API：口袋妖怪名單獲取另一塊數據

獲取塊http://pokeapi.co/api/v1/pokemon/?limit=12
獲取有關單一口袋妖怪信息 http://pokeapi.co/api/v1/pokemon/{{id}}
口袋妖怪圖片http://pokeapi.co/media/img/{{id}}.png
所有可能的類型http://pokeapi.co/api/v1/type/?limit=999

任何幫助讚賞。

來源

2016-03-16 Deni Chan

如需進一步參考，請在此處做一個小提琴而不是另一個網站，以便將來信息始終可用。那麼，它正在取代，因爲that's你告訴它做什麼數據：

$http.get('http://pokeapi.co/' + url).success(function(data){ 
     $scope.pokemons = data 
    });

而不是取代的（=），你只想添加新的小寵物。如果您檢查數據，則它是具有元信息和對象數組的對象。所以你需要替換元信息（告訴我們在哪裏），但是將新的小寵物添加到對象數組中。這修復它：

$http.get('http://pokeapi.co/' + url).success(function(data){ 
     $scope.pokemons.meta = data.meta 
     $scope.pokemons.objects = $scope.pokemons.objects.concat(data.objects) 
    });

這裏是工作提琴：

var pokedexApp = angular.module('pokedexApp',[]); 
 

 
pokedexApp.controller('pokedexCtrl', ['$scope', '$http', 
 
    function ($scope, $http){ 
 
     $http.get('http://pokeapi.co/api/v1/pokemon/?limit=12').success(function(data){ 
 
      $scope.pokemons = data; 
 
     }); 
 

 
    $scope.getInfo = function(id){ 
 
     $http.get('http://pokeapi.co/api/v1/pokemon/' + id).success(function(data){ 
 
      $scope.pokemonInfo = data; 
 
     }); 
 
     $('#pokemon-details').css('display', 'inline-block') 
 
     $('#pokemonPic').attr('src', 'http://pokeapi.co/media/img/'+ id +'.png') 
 
    }; 
 

 
    $scope.loadMore = function(url){ 
 
     $http.get('http://pokeapi.co/' + url).success(function(data){ 
 
      $scope.pokemons.meta = data.meta 
 
      $scope.pokemons.objects = $scope.pokemons.objects.concat(data.objects) 
 
      
 
     }); 
 
    } 
 
    }]);

#pokemon-list{ 
 
    display : inline-block; 
 
} 
 
#pokemons{ 
 
    width : 500px; 
 
    display : inline-block; 
 
} 
 
    li { 
 
    border : 1px solid black; 
 
    display: inline-block; 
 
    margin: 0 10px 5px 0 ; 
 
    list-style: none; 
 
    } 
 
    span { 
 
    display: block; 
 
    } 
 
    button { 
 
    display: block; 
 
    } 
 
    #pokemon-details{ 
 
    display : none; 
 
    vertical-align: top; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<body ng-app='pokedexApp'> 
 
    <div ng-controller='pokedexCtrl'> 
 

 
     <div id='pokemon-list'> 
 
     <ul id='pokemons'> 
 
      <li ng-repeat='pokemon in pokemons.objects' class='pokemon'> 
 
      <a href="#" ng-click = "getInfo(pokemon.pkdx_id)"> 
 
       <h3>{{pokemon.name}}</h3> 
 
       <img ng-src="http://pokeapi.co/media/img/{{pokemon.pkdx_id}}.png" width='100' alt="{{pokemon.name}}" /> 
 
       <span ng-repeat='type in pokemon.types'>{{type.name}}</span> 
 
      </a> 
 
      </li> 
 
     </ul> 
 
     <button type="button" ng-click='loadMore(pokemons.meta.next)'>Load More</button> 
 
     </div> 
 

 

 
     <div id='pokemon-details'> 
 
      <img src="" id='pokemonPic' width='200'/> 
 
      <h2>{{pokemonInfo.name}} #{{("0000" + pokemonInfo.pkdx_id).slice(-4)}}</h2> 
 
      <table border="1"> 
 
      <tr> 
 
       <td>Type</td> 
 
       <td><span ng-repeat='type in pokemonInfo.types'>{{type.name}} </span></td> 
 
      </tr> 
 
      <tr> 
 
       <td>Attack</td> <td>{{pokemonInfo.attack}}</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Defense</td> <td>{{pokemonInfo.defense}}</td> 
 
      </tr> 
 
      <tr> 
 
       <td>HP</td> <td>{{pokemonInfo.hp}}</td> 
 
      </tr>objects. 
 
      <tr> 
 
       <td>SP Atack</td> <td>{{pokemonInfo.sp_atk}}</td> 
 
      </tr> 
 
      <tr> 
 
       <td>SP Deffense</td> <td>{{pokemonInfo.sp_def}}</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Speed</td><td>{{pokemonInfo.speed}}</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Weight</td><td>{{pokemonInfo.weight}}</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Total movesS</td><td>{{pokemonInfo.moves.length}}</td> 
 
      </tr> 
 
      </table> 
 
     </div> 
 
    </div> 
 
    </body> 
 
</html>

來源

2016-03-16 15:09:08 juvian

謝謝你這麼多 –

@DeniChan沒有問題，隨時接受的答案，如果它已經完全解決您的的問題。有趣的是找出有關該API以及:) – juvian

獲取另一塊數據

回答

相關問題