Question

我想在点击按钮加载更多时加载列表的另一个块。在这个阶段，一大堆加载列表替换现有的加载列表。这是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

感谢任何帮助。

Answer 1

如需进一步参考，请在此处制作小提示而不是其他网站，以便将来始终可以使用该信息。好吧，它正在替换数据，因为这就是你要告诉它的事情：

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

您想要添加新的小宠物而不是替换（=）。如果检查数据，则它是具有元信息和对象数组的对象。所以你需要替换元信息（告诉我们在哪里），但是将新的pokemons添加到对象数组中。这解决了它：

  $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>

获取另一块数据

1 个答案: