使用带有角度属性分页过滤器的变量

Using a variable with angular-utils-pagination filter

本文关键字：分页 过滤器 变量 属性      更新时间：2023-09-26

我正在使用 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">

是否可以使属性对变量进行过滤？任何帮助，不胜感激。

谢谢。

所以下面是我最终得到的，效果很好。

html 标记：设置一个下拉框，其中包含所需的筛选器选项，用于在其中键入搜索条件的框。最后是目录分页指令的逻辑。

       <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'
    ];
相关文章：