Получить еще один кусок данных

Я хотел бы загрузить еще один фрагмент списка при нажатии кнопки Load More. На этом этапе кусок списка загрузки заменяет существующий. Вот кодовая ссылка 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 нет проблем, не стесняйтесь принять ответ, если он полностью решить ваши вопросы. Было интересно узнать об этом апи тоже :) – juvian

Получить еще один кусок данных

ответ

Смежные вопросы