i using angular-utils-pagination directive found here https://github.com/michaelbromley/angularutils/tree/master/src/directives/pagination. working expected far final thing want do, add ability have user able select attribute of item wish filter results on.
below have far. the html markup:
<div class="row"> <div class="col-xs-4"> <h3>current page: {{ currentpage }}</h3> <select ng-model="selectedfilter" ng-options="f f in filteroptions"></select> </div> <div class="col-xs-4"> <label for="search">search:</label> <input ng-model="q" id="search" class="form-control" placeholder="filter text"> </div> <div class="col-xs-4"> <label for="search">items per page:</label> <input type="number" min="1" max="100" class="form-control" ng-model="pagesize"> </div> </div> ... <tr dir-paginate="item in items | filter:{selectedfilter:q} | itemsperpage: pagesize" current-page="currentpage">
the controller
$scope.currentpage = 1; $scope.pagesize = 10; $scope.filteroptions = [ 'item','brand','category','gender','size' ]; // note items[] populated on initialisation db. $scope.items = [];
when hard code filter filter item below, works expected.
<tr dir-paginate="item in items | filter:{item:q} | itemsperpage: pagesize" current-page="currentpage">
is possible make attribute filter on variable? appreciated.
thanks.
so below ended works quite nicely.
the html markup: sets drop down box filter options want, box type search criteria in. towards end logic dir-paginate directive.
<div class="row"> <div class="col-xs-3"> <label for="filter">search:</label> <select ng-model="filter" id="filter" class="form-control" ng-options="f f in filteroptions"></select> {{filter}} </div> <div class="col-xs-3"> <label for="search">search on: <em>{{filter}} </em></label> <input ng-model="search[filter]" id="search" class="form-control" placeholder="filter text"> </div> <div class="col-xs-2"> <label for="search">items per page:</label> <input type="number" min="1" max="100" class="form-control" ng-model="pagesize"> </div> </div> ... <tr dir-paginate="item in items | filter:search | itemsperpage: pagesize" current-page="currentpage">
the controller: when select filter option drop down, changes attribute selected in search array within scope. $scope.search referenced dir-paginate directive.
$scope.currentpage = 1; $scope.pagesize = 10; $scope.search = {item:'', brand:'', category:'', itemid: '', $:''}; $scope.filteroptions = [ 'item','itemid','brand','category','gender','size' ];
Comments
Post a Comment