在AngularJS中分页

分页是一种将特定大页面的内容分成小页面并按索引格式显示它们的技术。该技术在设计搜索引擎时非常流行，在搜索引擎中，最相关的内容是按优先级显示的。此外，许多Angular开发人员都使用了分页技术，同时使用Bootstrap来开发动态网页。

例子：
在下面的示例中，实现了分页技术，在AngularJS中也称为分页技术。 HTML代码必须添加到index.html文件，而javascript代码必须添加到script.js文件。在下面提到的示例中，我们创建了一个表，并使用javascript将数据放入其中，并使用分页表示了整个实现。

    
        
      
        
        
      
  
        
        
        
    
    GeeksforGeeks
    
        
            
                
                    
                    
                    
                    
                    
                    
                    
                    
                
            
            
                
                
                
                
                
                
                
                
            
        COURSE CODECOURSE NAMECOURSE DESCRIPTIONNO. OF CHAPTERSAVAILABILITYTOTAL MARKSPASS MARKSSTATE OF COURSE{{item.courseCode}}{{item.courseName}}{{item.courseDescription}}{{item.noc}}{{item.available}}{{item.totm}}{{item.passm}}{{item.soc}}
        
      
    

// Write Javascript code here
var app = angular.module('myApp', ['ui.bootstrap']);
  
  app.controller('ListController', function($scope){
    
  $scope.curPage = 1,
  $scope.itemsPerPage = 3,
  $scope.maxSize = 5;
      
    this.items = itemsDetails;
    
    
  $scope.numOfPages = function () {
    return Math.ceil(itemsDetails.length / $scope.itemsPerPage);
      
  };
    
    $scope.$watch('curPage + numPerPage', function() {
    var begin = (($scope.curPage - 1) * $scope.itemsPerPage),
    end = begin + $scope.itemsPerPage;
      
    $scope.filteredItems = itemsDetails.slice(begin, end);
  });
  });
  
  var itemsDetails = [
    { courseCode : 1001,
      courseName : 'Web Technology',
      courseDescription : 'HTML, CSS, AngularJS',
      noc : '10',
      available : 'YES',
      totm : 200,
      passm : 75,
      soc : 'Active'
      },
    { courseCode : 1002,
      courseName : 'Software Technology',
      courseDescription :
      'Alpha testing, Beta testing, 
       Integration testing, Black box testing',
      noc : '10',
      available : 'YES',
      totm : 100,
      passm : 45,
      soc : 'Active'
      },
    { courseCode : 1003,
      courseName : 'Theory Of Computation',
      courseDescription : 'FSM, PDA, TM',
      noc : '100',
      available : 'NO',
      totm : 100,
      passm : 45,
      soc : 'Inactive'
      },
    { courseCode : 1004,
      courseName : 'Algorithm',
      courseDescription : 
        'Greedy algorithms, Dynamic Programming, Sorting',
      noc : '6',
      available : 'YES',
      totm : 200,
      passm : 75,
      soc : 'Active'
      },
    { courseCode : 1005,
      courseName : 'Networking',
      courseDescription : 'IP',
      noc : '12',
      available : 'YES',
      totm : 50,
      passm : 19,
      soc : 'Active'
      },
    {courseCode : 1006,
      courseName : 'Database',
      courseDescription : 'Indexing, B and B+ trees, SQL',
      noc : '24',
      available : 'NO',
      totm : 200,
      passm : 75,
      soc : 'Inactive'
      },
    { courseCode : 1007,
      courseName : 'Programming',
      courseDescription : 'C, C++, JAVA, Python',
      noc : '30',
      available : 'YES',
      totm : 200,
      passm : 75,
      soc : 'Active'
      },
    { courseCode : 1008,
      courseName : 'Data structure',
      courseDescription : 'Tree, Graph',
      noc : '10',
      available : 'NO',
      totm : 100,
      passm : 45,
      soc : 'Inactive'
      },
    { courseCode : 1009,
      courseName : 'Operating Systems',
      courseDescription : 
            'CPU Scheduling, Memory Managment, Disk Management',
      noc : '21',
      available : 'YES',
      totm : 200,
      passm : 75,
      soc : 'Active'
      },
    { courseCode : 1010,
      courseName : 'Compiler',
      courseDescription : 'Top down parsing, Bottom up Parsing',
      noc : '15',
      available : 'YES',
      totm : 200,
      passm : 75,
      soc : 'Active'
      }
  ];

输出：
第一页-

最后一页-

解释：
网页以表格形式显示所有可用课程的详细信息。这里使用的技术是分页。这样一来，在一个网页上只能播放三行，而在最后一页上只显示一行。
已创建四个页面。为了显示分页栏，我们使用ui.bootstrap作为AngularJS应用程序的依赖项。 “ curPage”用值1初始化，这意味着每当网页加载时，它将第一页显示为当前页。每页的项目数是使用“ itemsPerPage”变量指定的，并为其分配了值3，因为我们要在一个页面中最多显示3个项目。
“ maxSize”变量表示分页系统中允许的最大页面数。该行“ this.items = itemsDetails;”启动itemDetails变量。我们创建了一个计算页数的函数，然后将该值存储在名为“ numOfPages”的范围变量中。

我们已经输入了10门课程的详细信息，并且通过上述ceil函数计算的页数总计为4页。我们在“ itemsDetails”数组中有10个项目，这意味着数组索引的范围为0到9。对于第一页，“ curPage”的值将为0。这将使begin的值成为0。它将帮助我们获取数组的第一个索引值。 “ end”变量的值将为0 + 3 =3。通过使用slice()方法，我们显示了3行，分别是项目编号0、1和2。类似地，在第二，第三和第四页中，显示其余项目。这就是AngularJS中的分页的工作方式。