Friday 15 July 2011

javascript - Angular search filter doesnt search in entire table -



javascript - Angular search filter doesnt search in entire table -

this html code:

<input type="text" placeholder="search any..." ng-model="search.$"/> <table dir="ltr" width="477" border="1" class="table table-striped table-bordered"> <thead> <tr> <th><a style="font-size: 16px;" href="#" ng-click="changesort('name')">user</a></th> <th><a style="font-size: 16px;" href="#" ng-click="changesort('contenttype')">content type</a></th> <th><a style="font-size: 16px;" href="#" ng-click="changesort('contentname')">content name</a></th> <th><a style="font-size: 16px;" href="#" ng-click="changesort('starttime')">start time</a></th> <th><a style="font-size: 16px;" href="#" ng-click="changesort('endtime')">end time</a></th> <th><a style="font-size: 16px;" href="#" ng-click="changesort('duration')">duration(in secs)</a></th> </tr> </thead> <tbody> <tr ng-repeat="record in filteredrecords | filter: search | orderby:sort:reverse track $index"> <td>{{record.user}}</td> <td>{{record.contenttype}}</td> <td>{{record.contentname}}</td> <td>{{record.starttime}}</td> <td>{{record.endtime}}</td> <td>{{record.duration}}</td> </tr> </tbody> </table> <pagination class="pull-right" style="cursor: pointer;" num-pages="numpages()" current-page="currentpage" on-select-page="pagechanged(page)"></pagination>

this angular code:

angular.module("contentviewstatusapp") .controller("contentviewstatuscontroller", function($scope, contentviewstatusservice) { $scope.records = contentviewstatusservice.list(); $scope.currentpage = 1 $scope.numperpage = 10 $scope.maxsize = 5; $scope.numpages = function() { homecoming math.ceil($scope.records.length / $scope.numperpage); }; $scope.changesort = function(value) { if ($scope.sort == value) { $scope.reverse = !$scope.reverse; return; } $scope.sort = value; $scope.reverse = false; } $scope.$watch('currentpage + numperpage', function() { var begin = (($scope.currentpage - 1) * $scope.numperpage), end = begin + $scope.numperpage; $scope.filteredrecords = $scope.records.slice(begin, end); }); });

the problem search filter finds records current page , want find record entire table, how can that, help appreciated. thanks

you pagination using filters instead of creating array. way search through entire array before beingness filtered down.

this page shows illustration of pagination filters.

then have search query first , should search through whole array

update

here's 1 pagination updates based on search text: http://jsfiddle.net/2c4xx42e/2/

it watches search text , updates page range after filtering:

$scope.$watch('searchtext.name', function (v) { $scope.currentpage = 0; $scope.pages = $scope.range(); });

then pagecount updated based on filtered results:

$scope.pagecount = function () { var pages = $filter('filter')($scope.items, $scope.searchtext); homecoming math.ceil(pages.length / $scope.itemsperpage); };

javascript angularjs angularjs-ng-repeat angular-ui-bootstrap

No comments:

Post a Comment