we have angular object
|
1 2 3 4 5 6 7 8 9 10 11 |
$scope.query = { order: 'name', limit: 10, page: 1 }; $scope.pages = { "count": objPageList.length, "data": objPageList }; |
In above, we have one pages objects which stores page list and page count.
Consider, we have page status filters. which values is stored in ‘filterData.selectedPageStatus’ object that is we are passing to page custom filter.
so out html looks like below
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<md-card> <md-table-container> <table width="100%" md-table multiple="{{options.multiSelect}}" ng-model="selected" md-progress="promise"> <thead ng-if="!options.decapitate" md-head> <tr md-row class="table-row-head"> <th md-column width="23%"><span>Page Title</span></th> <th md-column width="10%"><span>Property</span></th> <th md-column width="15%"><span>Slug</span></th> <th md-column width="13%"><span>Monetized Products</span></th> <th md-column width="20%"><span>Estimated Publication Date</span></th> <th md-column width="15%"><span>Page Status</span></th> </tr> </thead> <tbody md-body> <tr md-row ng-repeat="page in pages.data | customPageFilter:filterData:this | limitTo: query.limit : (query.page -1) * query.limit"> <td md-cell width="23%">{{page.PageTitle}}</td> <td md-cell width="10%">{{page.Property}}</td> <td md-cell width="15%">{{page.Slug}}</td> <td md-cell width="13%">{{page.MonetizedProductPercentage}}%</td> <td md-cell width="20%"> <md-datepicker name="PageEstPublishedDate" ng-init="page.PageEstPublishedDate=ConvertToDate(page.EstPublishedDate);" ng-change="ChangeEstPublishedDate(page)" ng-model="page.PageEstPublishedDate" md-placeholder="Enter date" onkeydown="return false"></md-datepicker> </td> <td md-cell width="15%">{{page.PageStatus}}</td> </tr> <tr md-row ng-if="pages.count==0"> <td md-cell colspan="6"> No record(s) found. </td> </tr> </tbody> </table> </md-table-container> <md-table-pagination md-limit="query.limit" md-limit-options="limitOptions" md-page="query.page" md-total="{{pages.count}}" md-page-select="options.pageSelect" md-boundary-links="options.boundaryLinks"></md-table-pagination> </md-card> |
Now, add below code in app.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
app.filter('customPageFilter', function () { return function (items, searchText, filterData, scope) { if (filterData == undefined) { // scope.query.page = 1; if (items != undefined) { scope.pages.count = items.length; } return items; } if ((filterData.selectedPageStatus == undefined || filterData.selectedPageStatus.length == 0)) { // scope.query.page = 1; if (items != undefined) { scope.pages.count = items.length; } return items; } var keys = Object.keys(filterData); var filtered = []; var populate = true; if (items != undefined) { for (var i = 0; i < items.length; i++) { var item = items[i]; populate = true; for (var j = 0; j < keys.length ; j++) { if (filterData.selectedPageStatus != undefined) { if (keys[j] == 'selectedPageStatus' && filterData.selectedPageStatus.length > 0) { if (filterData[keys[j]].contains(item["PageStatus"])) { populate = true; } else { populate = false; break; } } } } if (populate) { filtered.push(item); } } } // scope.query.page = 1; scope.pages.count = filtered.length; return filtered; }; }); |
Here we done.
Please comment if you have any query.:)
