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

标题下方的每个过滤器都用作“包含”功能过滤器。我所说的'包含'是指，如果我在标题C过滤器中加上'1'，它将显示10,12,13,14和15（因为这些数字包含'1'），其中包含来自标题A和B的相应数据

对于标题A和B，'contains'很好，但我希望标题C具有'range'功能而不是'contains'。所以我的目的是输入headerC_start的最小值和headerC_end的最大值，我希望该表过滤出最小值和最大值之间的所有数字，所有相应的信息都形成标题A和B.所以如果我把10放在headerC_eart和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

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

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

由于

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;

希望有所帮助

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

1 个答案: