Использование переменной с фильтром angular-utils-pagination

Question

Использование переменной с фильтром angular-utils-pagination

0

Я использую директиву Angular-utils-pagination, найденную здесь https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination. Он работает так, как ожидалось, но последнее, что я хочу сделать, заключается в том, что пользователь может выбрать, к какому атрибуту объекта, который они хотят отфильтровать.

Ниже я до сих пор. Разметка Html:

            <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">

Контроллер

            $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 = [];

Когда я жестко кодирую фильтр, чтобы сказать фильтр по элементу, как показано ниже, он работает так, как ожидалось.

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

Можно ли настроить атрибут на переменную? Любая помощь приветствуется.

Благодарю.

ricky89 24 янв. 2016, в 18:07

Источник

0

см. этот ответ: stackoverflow.com/questions/17319645/…
Skaparate 25 янв. 2016, в 02:39
0

Привет Скапарате. Идея, представленная по ссылке, сработала для меня. Я просто настроил пример для работы с моим раскрывающимся списком. Скоро выложу решение. Благодарю.
ricky89 27 янв. 2016, в 09:04

Теги:

javascript

angularjs

pagination

1 ответ

Ещё вопросы

см. этот ответ: stackoverflow.com/questions/17319645/…
Привет Скапарате. Идея, представленная по ссылке, сработала для меня. Я просто настроил пример для работы с моим раскрывающимся списком. Скоро выложу решение. Благодарю.

ricky89 · Accepted Answer · 2016-01-27T20-23-00.000Z

Итак, вот что я закончил, с которым хорошо работает.

Разметка html: устанавливает раскрывающийся список с параметрами фильтра, которые вы хотите, поле для ввода критериев поиска. К концу это логика директивы dir-paginate.

       <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">

Контроллер: когда вы выбираете параметр фильтра из раскрывающегося списка, он изменяет атрибут, выбранный в массиве поиска в пределах области. Это $ scope.search, на который ссылается директива dir-paginate.

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

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