Question

我使用的是https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination中的Angular-utils-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">

是否可以使属性过滤变量？任何帮助表示赞赏。

感谢。

Answer 1

以下是我最终得到的结果非常好。

html标记：设置一个带有所需过滤器选项的下拉框，用于输入搜索条件的框。最后是dir-paginate指令的逻辑。 / p>

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

控制器：从下拉列表中选择过滤器选项时，它会更改范围内搜索阵列中所选的属性。然后由dir-paginate指令引用$ scope.search。

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

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

使用带有angular-utils-pagination过滤器的变量

1 个答案: