質問: angularjsでページングを行う方法 メモリ内に約1000項目のデータセットがあり、このデータセット用のポケットベルを作成しようとしていますが、これを行う方法がわかりません。私は結果をフィルタリングするためにカスタムフィルタ関数を使っています、そしてそれはうまくいきますが、どういうわけか私はページ数を取り出す必要があります。何か手がかりはありますか?
回答: ここで関連する部分を抜粋しました。これは「飾りなし」の表形式のページャなので、並べ替えやフィルタ処理は含まれていません。必要に応じて自由に変更/追加してください。 //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>