Using a variable with angular-utils-pagination filter

Question

I am using the Angular-utils-pagination directive found here https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination. It is working as expected so far but the final thing I want to do, is add the ability to have the user be able to select which attribute of an item they wish to filter results on.

Below is what I have so far. The Html Markup:

            <div class="row">
            <div class="col-xs-4">
                <h3>Current Page: {{ currentPage }}</h3>
                <select ng-model="selectedFilter" ng-options="f for 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 that items[] is populated on initialisation from the db.
            $scope.items = [];

When I hard code the filter to say filter by item as below, it works as expected.

<tr dir-paginate="item in items | filter:{item:q} | itemsPerPage: pageSize" current-page="currentPage">

Is it possible to make the attribute to filter on a variable? Any help is appreciated.

Thanks.

Hi Skaparate. The idea provided on the link worked for me. I just adjusted the example to work with my drop down. Will post the solution soon. Thanks. — ricky89
– ricky89, Commented Jan 27, 2016 at 9:04

ricky89 · Accepted Answer · 2016-01-27 21:59:28Z

So below is what I ended up with which works quite nicely.

The html markup: Sets up a drop down box with the filter options you want, the box to type the search criteria in. Towards the end is the logic for the 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 for 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 you select a filter option from the drop down, it changes the attribute selected in the search array within the scope. It is the $scope.search that is then referenced by the dir-paginate directive.

    $scope.currentPage = 1;
    $scope.pageSize = 10;
    $scope.search = {item:'', brand:'', category:'', itemId: '', $:''};

    $scope.filterOptions = [
        'item','itemId','brand','category','gender','size'
    ];

Collectives™ on Stack Overflow

Using a variable with angular-utils-pagination filter

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related