2024年2月29日 星期四

AngularJS - 自製分頁 Filter

紀錄一下 AngularJS 自製分頁 Filter 的方法

HTML:

<div ng-app="app" ng-controller="controller as ctrl">
  <div ng-repeat="item in ctrl.itmeList | paging:ctrl.page:ctrl.pageSize">
    {{item}}
  </div>
  
  <div>  
    Page: <input type="number" ng-model="ctrl.page"/>
  </div>
  <div>  
    Page size: <input type="number" ng-model="ctrl.pageSize"/> Page
  </div>
</div>

Javascript:

var app = angular.module("app", []);
app.controller("controller", [function() {
	var self = this;
  self.itmeList = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
  self.page = 1;
  self.pageSize = 3;
}]);

app.filter('paging', function() {
	    return function(input, page, pageSize) {
	        return input.slice(page * pageSize - pageSize, page * pageSize);
	    }
});

JsFiddle 範例:

參考資料:

  1. Filters

沒有留言 :

張貼留言