使用Ng表，添加自定义数字范围过滤器到一个特定的列

我一直在寻找遍布网络找到解决方案，但我无法找到适合我的具体需求的解决方案。使用Ng表，添加自定义数字范围过滤器到一个特定的列

因此，我有一个表（使用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，'包含'没有问题，但我希望标头C具有'范围'功能而不是'包含'。所以我的目的是在headerC_start处输入最小值，并在headerC_end处输入最大值，并且我希望表格将所有最小值和最大值之间的所有数字过滤掉，所有相应的信息都形成头部A和B.所以如果我把10放在headerC_start和14在headerC_end，它将只显示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

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

我真的很感激任何输入！

谢谢

来源

2016-10-02 Jessi

我刚刚解决了类似的问题。我用

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;

希望它可以帮助

来源

2017-02-28 14:00:12

使用Ng表，添加自定义数字范围过滤器到一个特定的列

回答

相关问题