试着学习Angular——为什么这里的分页不能正常工作?

Trying to learn Angular - why isn't the pagination working here?

本文关键字：常工作 不能 工作 分页 学习 Angular 为什么 这里      更新时间：2023-09-26

我正在尝试通过做一个小兴趣项目来学习Angular。我试图遵循这里给出的分页示例-如何在AngularJS中分页?但是我不能让它为我工作。我做错了什么?下面是代码-

<!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>
脚本

  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 =预览

我没有完整的解决方案，但您必须在body或div中写入"ng-controller"。

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

如果在Table上有控制器，只有Table self和它的子元素知道这个控制器。在你有data-num-pages的地方，把它改成data-page-size，因为你没有可变的numPages

在reddit上找到我的答案-

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

相关文章：