메모리에 약 1000 개의 항목에 대한 데이터 세트가 있으며이 데이터 세트에 대한 호출기를 작성하려고 시도하지만이 작업을 수행하는 방법을 잘 모르겠습니다.

결과를 필터링하기 위해 사용자 정의 필터 기능을 사용하고 있으며 제대로 작동하지만 어떻게 든 페이지 수를 가져와야합니다.

단서가 있습니까?

답변

각도 UI 부트 스트랩-페이지 매김 지시문

UI Bootstrap 의 페이지 매김 지시문을 확인하십시오 . 현재 사용하기에 충분한 기능을 갖추고 있으며 함께 사용할 수있는 철저한 테스트 사양 이 있기 때문에 여기에 게시 된 것보다 사용 했습니다.

전망

<!-- table here -->

<pagination
  ng-model="currentPage"
  total-items="todos.length"
  max-size="maxSize"
  boundary-links="true">
</pagination>

<!-- items/page select here if you like -->

제어 장치

todos.controller("TodoController", function($scope) {
   $scope.filteredTodos = []
  ,$scope.currentPage = 1
  ,$scope.numPerPage = 10
  ,$scope.maxSize = 5;

  $scope.makeTodos = function() {
    $scope.todos = [];
    for (i=1;i<=1000;i++) {
      $scope.todos.push({ text:"todo "+i, done:false});
    }
  };
  $scope.makeTodos();

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

    $scope.filteredTodos = $scope.todos.slice(begin, end);
  });
});

나는 참고 로 작동하는 플 런커 를 만들었습니다 .

레거시 버전 :

전망

<!-- table here -->

<div data-pagination="" data-num-pages="numPages()"
  data-current-page="currentPage" data-max-size="maxSize"
  data-boundary-links="true"></div>

<!-- items/page select here if you like -->

제어 장치

todos.controller("TodoController", function($scope) {
   $scope.filteredTodos = []
  ,$scope.currentPage = 1
  ,$scope.numPerPage = 10
  ,$scope.maxSize = 5;

  $scope.makeTodos = function() {
    $scope.todos = [];
    for (i=1;i<=1000;i++) {
      $scope.todos.push({ text:"todo "+i, done:false});
    }
  };
  $scope.makeTodos();

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

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

    $scope.filteredTodos = $scope.todos.slice(begin, end);
  });
});

나는 참고 로 작동하는 플 런커 를 만들었습니다 .

답변

최근에 Built with Angular 사이트에 페이징을 구현했습니다. https://github.com/angular/builtwith.angularjs.org 소스를 확인하십시오.

필터를 사용하여 페이지를 분리하지 마십시오. 컨트롤러 내에서 항목을 페이지로 분할해야합니다.

답변

나는 Angular로 페이지 매김을 상당히 몇 번 구현해야했으며, 항상 단순화 될 수 있다고 느낀 것은 약간의 고통이었습니다. 여기 및 다른 곳에서 제시된 아이디어 중 일부를 사용하여 페이지 매김을 간단하게 만드는 페이지 매김 모듈을 만들었습니다.

<ul>
    <li dir-paginate="item in items | itemsPerPage: 10">{{ item }}</li>
</ul>

// then somewhere else on the page ....

<dir-pagination-controls></dir-pagination-controls>

그게 다야. 다음과 같은 기능이 있습니다.

컬렉션 items에서 페이지 매김 링크에 연결하기 위해 컨트롤러에 사용자 지정 코드가 필요하지 않습니다 .
당신은 테이블이나 gridview를 사용할 수 없습니다-당신은 당신이 반복 할 수있는 모든 것을 페이지 매김 할 수 있습니다!
에 위임 ng-repeat하므로 ng-repeat필터링, 순서 지정 등을 비롯하여 에서 사용할 수있는 모든 표현식을 사용할 수 있습니다 .
여러 컨트롤러에서 작동- 지시문은 지시문이 호출 pagination-controls되는 컨텍스트에 대해 아무것도 알 필요가 없습니다 paginate.

데모 : http://plnkr.co/edit/Wtkv71LIqUR4OhzhgpqL?p=preview

“플러그 앤 플레이”솔루션을 찾는 사람들에게는 이것이 유용하다고 생각합니다.

암호

이 코드는 GitHub에서 사용할 수 있으며 꽤 좋은 테스트 세트가 포함되어 있습니다.

https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination

당신이 관심이 있다면 나는 또한 모듈의 디자인에 대해 조금 더 통찰력있는 짧은 조각을 썼습니다 : http://www.michaelbromley.co.uk/blog/108/paginate-almost-anything-in-angularjs/

답변

방금 btford 코드를 사용하여 각 열에서 페이지 매김 + 검색 + 순서를 표시하는 JSFiddle을 만들었습니다 : http://jsfiddle.net/SAWsA/11/

답변

Scotty.NET의 plunkr를 업데이트 했습니다 http://plnkr.co/edit/FUeWwDu0XzO51lyLAEIA?p=preview 하여 최신 버전의 angular, angular-ui 및 bootstrap을 사용합니다.

제어 장치

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();
  };

});

부트 스트랩 UI 구성 요소

 <pagination boundary-links="true"
    max-size="3"
    items-per-page="itemsPerPage"
    total-items="todos.length"
    ng-model="currentPage"
    ng-change="pageChanged()"></pagination>

답변

이것은 구글 검색 결과와 같은 페이지 매김 로직을 구현하기 위해 Angular 서비스로 포장 한 순수한 자바 스크립트 솔루션입니다.

http://codepen.io/cornflourblue/pen/KVeaQL/ 에서 CodePen에 대한 실무 데모

이 블로그 게시물의 세부 사항 및 설명

function PagerService() {
    // service definition
    var service = {};

    service.GetPager = GetPager;

    return service;

    // service implementation
    function GetPager(totalItems, currentPage, pageSize) {
        // default to first page
        currentPage = currentPage || 1;

        // default page size is 10
        pageSize = pageSize || 10;

        // calculate total pages
        var totalPages = Math.ceil(totalItems / pageSize);

        var startPage, endPage;
        if (totalPages <= 10) {
            // less than 10 total pages so show all
            startPage = 1;
            endPage = totalPages;
        } else {
            // more than 10 total pages so calculate start and end pages
            if (currentPage <= 6) {
                startPage = 1;
                endPage = 10;
            } else if (currentPage + 4 >= totalPages) {
                startPage = totalPages - 9;
                endPage = totalPages;
            } else {
                startPage = currentPage - 5;
                endPage = currentPage + 4;
            }
        }

        // calculate start and end item indexes
        var startIndex = (currentPage - 1) * pageSize;
        var endIndex = startIndex + pageSize;

        // create an array of pages to ng-repeat in the pager control
        var pages = _.range(startPage, endPage + 1);

        // return object with all pager properties required by the view
        return {
            totalItems: totalItems,
            currentPage: currentPage,
            pageSize: pageSize,
            totalPages: totalPages,
            startPage: startPage,
            endPage: endPage,
            startIndex: startIndex,
            endIndex: endIndex,
            pages: pages
        };
    }
}

답변

여기서 관련 비트를 추출했습니다. 이것은 ‘프릴없는’표식 호출기이므로 정렬 또는 필터링이 포함되지 않습니다. 필요에 따라 자유롭게 변경 / 추가하십시오 :

     //your data source may be different. the following line is 
     //just for demonstration purposes only
    var modelData = [{
      text: 'Test1'
    }, {
      text: 'Test2'
    }, {
      text: 'Test3'
    }];

    (function(util) {

      util.PAGE_SIZE = 10;

      util.range = function(start, end) {
        var rng = [];

        if (!end) {
          end = start;
          start = 0;
        }

        for (var i = start; i < end; i++)
          rng.push(i);

        return rng;
      };

      util.Pager = function(data) {
        var self = this,
          _size = util.PAGE_SIZE;;

        self.current = 0;

        self.content = function(index) {
          var start = index * self.size,
            end = (index * self.size + self.size) > data.length ? data.length : (index * self.size + self.size);

          return data.slice(start, end);
        };

        self.next = function() {
          if (!self.canPage('Next')) return;
          self.current++;
        };

        self.prev = function() {
          if (!self.canPage('Prev')) return;
          self.current--;
        };

        self.canPage = function(dir) {
          if (dir === 'Next') return self.current < self.count - 1;
          if (dir === 'Prev') return self.current > 0;
          return false;
        };

        self.list = function() {
          var start, end;
          start = self.current < 5 ? 0 : self.current - 5;
          end = self.count - self.current < 5 ? self.count : self.current + 5;
          return Util.range(start, end);
        };

        Object.defineProperty(self, 'size', {
          configurable: false,
          enumerable: false,
          get: function() {
            return _size;
          },
          set: function(val) {
            _size = val || _size;
          }
        });

        Object.defineProperty(self, 'count', {
          configurable: false,
          enumerable: false,
          get: function() {
            return Math.ceil(data.length / self.size);
          }
        });
      };

    })(window.Util = window.Util || {});

    (function(ns) {
      ns.SampleController = function($scope, $window) {
        $scope.ModelData = modelData;
        //instantiate pager with array (i.e. our model)
        $scope.pages = new $window.Util.Pager($scope.ModelData);
      };
    })(window.Controllers = window.Controllers || {});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<table ng-controller="Controllers.SampleController">
  <thead>
    <tr>
      <th>
        Col1
      </th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="item in pages.content(pages.current)" title="{{item.text}}">
      <td ng-bind-template="{{item.text}}"></td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="4">
        <a href="#" ng-click="pages.prev()">&laquo;</a>
        <a href="#" ng-repeat="n in pages.list()" ng-click="pages.current = n" style="margin: 0 2px;">{{n + 1}}</a>
        <a href="#" ng-click="pages.next()">&raquo;</a>
      </td>
    </tr>
  </tfoot>
</table>

스 니펫 확장