Próbuję nauczyć się kątowego, robiąc trochę projektu hobby. Próbuję podążać za przykładami paginacji podane tutaj- Jak zrobić stronicowanie w Angularjs? , ale nie mogę tego pracować. Co ja robię źle? Oto kod

html

<!DOCTYPE html>
<html lang="en" ng-app="dungeonIndex">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Dungeon Magazine Adventures List</title>
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
    <div class="container">

      <table class="table" ng-controller="DungeonController">
        <tr>
          <th>Issue</th>
          <th>Adventure</th>
          <th>Game</th>
          <th>Setting</th>
          <th>Level(s)</th>
          <th>Author(s)</th>
        </tr>
        <tr ng-repeat="dungeon in dungeons | limitTo:pageSize ">
          <td>{{dungeon.issue}}</td>
          <td>{{dungeon.title}}</td>
          <td>{{dungeon.game}}</td>
          <td>{{dungeon.setting}}</td>
          <td>{{dungeon.levels}}</td>
          <td>{{dungeon.author}}</td>
        </tr>
      </table>
      <div data-pagination="" data-num-pages="numPages()" data-current-page="currentPage" data-max-size="maxSize" data-boundary-links="true"></div>  
    </div>   

  </body>
</html>

skrypt

  var app = angular.module('dungeonIndex', ['ui.bootstrap']);

  app.controller('DungeonController', function ($scope, $http){
    $http.get('dungeon_magazines.json').success(function(data) {
      $scope.filteredDungeons = [];
      $scope.dungeons = data;

      $scope.currentPage = 1;
      $scope.pageSize = 10;
      $scope.maxSize = 5;          

      $scope.numPages = function () {
        return Math.ceil($scope.dungeons.length / $scope.pageSize);
      };

      $scope.$watch('currentPage + numPerPage', function() {
        var begin = (($scope.currentPage - 1) * $scope.pageSize);
        var end = begin + $scope.pageSize;

        $scope.filteredDungeons = $scope.dungeons.slice(begin, end);
      });                    
    });
  });

http://plnkr.co/edit/pbdtk?p=preview.

0
Mike Hensley 15 sierpień 2014, 18:27

2 odpowiedzi

Najlepsza odpowiedź

Dostałem moją odpowiedź na Reddit-

http://www.reddit.com/r/angularjs/comments/2dmvmx/angular_noob_why_doesnt_my_pagination_work/

0
Mike Hensley 15 sierpień 2014, 15:53

Nie mam pełnego rozwiązania, ale musisz napisać "kontroler NG" w swoim ciele lub div.

<body ng-controller="DungeonController">
<div class="container">

  <table class="table">
    <tr>
      <th>Issue</th>
      <th>Adventure</th>
      <th>Game</th>
      <th>Setting</th>
      <th>Level(s)</th>
      <th>Author(s)</th>
    </tr>
    <tr ng-repeat="dungeon in dungeons | limitTo:pageSize ">
      <td>{{dungeon.issue}}</td>
      <td>{{dungeon.title}}</td>
      <td>{{dungeon.game}}</td>
      <td>{{dungeon.setting}}</td>
      <td>{{dungeon.levels}}</td>
      <td>{{dungeon.author}}</td>
    </tr>
  </table>
  <div data-pagination="" data-num-pages="numPages()" data-current-page="currentPage" data-max-size="maxSize" data-boundary-links="true"></div>  
</div>   

Jeśli masz kontroler na stole, tylko tyłek i jego elementy dzieci znają kontrolera. I wszędzie masz strony-numery, zmień go na rozmiar danych, ponieważ don'z ma dewipę o zmiennej.

0
Ryter 15 sierpień 2014, 15:46