0

I'm trying to learn Angular by doing a little hobby project. Im trying to follow the pagination examples given here- How to do paging in AngularJS?, but I can't get it to work for me. What am I doing wrong? Here is the code-

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>

script

  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/YpbdTK?p=preview

Community
  • 1
  • 1
Mike Hensley
  • 89
  • 1
  • 1
  • 5

2 Answers2

0

I don't have the full Solution, but you have to write the "ng-controller" in your body or 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>

If you have the controller on the Table, just the table self and his children elements know the controller. And everywhere you have data-num-pages, change it to data-page-size, because you don'z have de variable numPages.

Ryter
  • 110
  • 9
0

Got my answer over on reddit-

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

Mike Hensley
  • 89
  • 1
  • 1
  • 5