How to do paging in AngularJS?

后端 未结 21 1895
轮回少年
轮回少年 2020-11-22 07:17

I have a dataset of about 1000 items in-memory and am attempting to create a pager for this dataset, but I\'m not sure on how to do this.

I\'m using a custom filter

21条回答
  •  伪装坚强ぢ
    2020-11-22 07:51

    I updated Scotty.NET's plunkr http://plnkr.co/edit/FUeWwDu0XzO51lyLAEIA?p=preview so that it uses newer versions of angular, angular-ui, and bootstrap.

    Controller

    var todos = angular.module('todos', ['ui.bootstrap']);
    
    todos.controller('TodoController', function($scope) {
      $scope.filteredTodos = [];
      $scope.itemsPerPage = 30;
      $scope.currentPage = 4;
    
      $scope.makeTodos = function() {
        $scope.todos = [];
        for (i=1;i<=1000;i++) {
          $scope.todos.push({ text:'todo '+i, done:false});
        }
      };
    
      $scope.figureOutTodosToDisplay = function() {
        var begin = (($scope.currentPage - 1) * $scope.itemsPerPage);
        var end = begin + $scope.itemsPerPage;
        $scope.filteredTodos = $scope.todos.slice(begin, end);
      };
    
      $scope.makeTodos(); 
      $scope.figureOutTodosToDisplay();
    
      $scope.pageChanged = function() {
        $scope.figureOutTodosToDisplay();
      };
    
    });
    

    Bootstrap UI component

     
    

提交回复
热议问题