javascript - Using a variable with angular-utils-pagination filter -


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