javascript - 使用 Ng-table，将自定义数字范围过滤器添加到特定列

Question

我一直在网上寻找解决方案，但找不到适合我的特定需求的解决方案。

所以我有一个表(使用 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

标题正下方的每个过滤器都用作“包含”功能过滤器。“包含”的意思是，如果我将“1”放入 header C 过滤器中，它将显示 10、12、13、14 和 15(因为这些数字包含“1”)以及 header A 和 B 中的相应数据.

对于 header A 和 B ，“包含”很好，但我希望 header C 具有“范围”功能而不是“包含”。所以我的目的是在 headerC_start 处输入最小值，在 headerC_end 处输入最大值，并且我希望表过滤掉该最小值和最大值之间的所有数字以及标题 A 和 B 中的所有相应信息。因此，如果我将 10 放在headerC_start 和 headerC_end 处为 14，则只会显示 10、12,13 和 14 以及 header A 和 header B 中的所有相应信息。

我尝试了几种不同的方法来解决这个问题，包括编写自己的自定义过滤器函数，但我无法将该自定义过滤器函数应用于 header_C，因为所有 header A、B 和 C 都绑定(bind)到 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

但我找不到将示例代码实现到我的脚本中的方法。

我真的很感激任何意见!!!!

谢谢

Answer 1

我刚刚解决了类似的问题。我使用了自定义过滤器

HTML(使用 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;

希望对你有帮助