使用Ng-table,为特定列添加自定义数字范围过滤器

using Ng-table, adding custom number range filter to a particular column

本文关键字:自定义 添加 数字 范围 过滤器 Ng-table 使用      更新时间:2023-09-26

我一直在网上寻找解决方案,但我没能找到一个适合我具体需求的解决方案。

所以我有一个表(使用ng-table模块构建),有几个列,如下所示。

headerA   headerB     headerC_start     headerC_end
-filter-  -filter-    -filter-           -filter-
AAA        AAAA        10                   10
BBB        BBBB        12                   12
CCC        CCCC        13                   13
DDD        DDDD        14                   14
EEE        EEEE        15                   15
FFF        FFFF        22                   22

header下面的每个过滤器都是' contains '函数过滤器。我所说的"包含"是指,如果我在标题C过滤器中放入"1",它将显示10,12,13,14和15(因为这些数字包含"1")与标题A和b的相应数据。

对于头A和B,"包含"是好的,但我希望头C具有"范围"函数而不是"包含"。因此,我的目的是在headerC_start处输入最小值,在headerC_end处输入最大值,我希望表格过滤掉最小值和最大值之间的所有数字,并包含头部A和b的所有相应信息。因此,如果我在headerC_start处输入10,在headerC_end处输入14,它将只显示10,12,13和14以及头部A和头部b的所有相应信息。

我尝试了几种不同的方法来解决这个问题,包括编写我自己的自定义过滤函数,但我无法将自定义过滤函数应用于header_C,因为所有头A, B和C都绑定到ng-table模块。

下面是我的代码片段。

(html

<table ng-table="someTable" show-filter="true" class="table table-bordered table-striped table-condensed">
<tr ng-repeat="item in data">

    <td data-title="'headerA'" sortable="'headerA'" filter="{ 'headerA': 'text' }" >
        {{item.attributeA}}
    </td>
    <td data-title="'headerB'" sortable="'headerB'" filter="{ 'headerB': 'text' }" >
        {{item.attributeB}}
    </td>

    <td data-title="'headerC_start'" sortable = "'headerC_start'" filter = "{'headerC_start':'text'}">
        {{item.attributeC}}
    </td>

    <td data-title ="'headerC_end'" sortable = "'headerC_end'" filter="{'headerC_end':'text'}">
        {{item.attributeC}}
    </td>

——JS

angular.module('someApp', ['ngTable', 'ui.bootstrap', 'mainApp'])
.config(function someAppConfig($routeProvider) {
    $routeProvider
        .when('/some', {
            templateUrl: 'view/some.html',
            controller: 'some_table_controller'
        });
})

.controller('some_table_controller', function ($scope, $http, $filter, NgTableParams) {

    $http.get("http://127.0.0.1:5000/some/range/xxxx", {cache: true})
        .then(function (response) {
            $scope.something = response.data;

            $scope.somethingTable = new NgTableParams({
                page: 1,
                count: 10
            },
                {

                getData: function (params) {
                    if (params.sorting()) {
                        $scope.data = $filter('orderBy')($scope.something, params.orderBy());
                    } else {
                        $scope.data = $scope.something;
                    }
                    if (params.filter()) {
                        $scope.data = $filter('filter')($scope.data, params.filter());
                    } else {
                        $scope.data = $scope.data;
                    }
                    $scope.data = $scope.data.slice((params.page() - 1) * params.count(), params.page() * params.count());
                    return $scope.data;
            }
        });
    });
});

几个小时以来,我在这个例子中尝试了最正确的一个,(自定义过滤器函数)

http://codepen.io/christianacca/pen/yNWeOP

但是我找不到一种方法来实现示例代码到我的脚本。

我真的很感激任何输入!!!!

谢谢

我刚刚解决了一个类似的问题。我使用自定义滤镜

HTML (using Thymeleaf)

<td th:attr="data-title=|'My Header'|" filter="{'headerA' : 'numberRange'}">
过滤器:

<script type="text/ng-template" id="ng-table/filters/numberRange.html">
    <form class="form-inline">
        <span>Between</span>
        <input type='number' ng-model="params.filter()[name + 'Min']" name="filter-numberRange" class="form-control" min="1" />
        <span>and</span>
        <input type='number' ng-model="params.filter()[name + 'Max']" name="filter-numberRange" class="form-control" min="1" />
     </form>
</script>

你的javascript

var minRange = params.filter().headerAMin;
var maxRange = params.filter().headerAMax;

希望有所帮助