ng-table 数字范围过滤器不起作用

Question

我想做什么

我试图让我的一列接受两个数字（在一列中），这样我就可以只为这一列按范围过滤数字数据。所有其他按 'contain text' 排序、分页和过滤都工作正常，但我只是不确定我将如何只让一个特定的列具有 'range' 过滤器。

我想要的图形表示

column_header1    columns_header2         column_header3

contain_filter1   contain_filter2         filter3_min_number
                                          filter3_max_number

  data                 data                   numeric data
    .                    .                          .
    .                    .                          .
    .                    .                          .

我目前有什么

我从 ng-table 模块网站上找到了一个示例，我尝试将他们的代码实现到我的代码中，但是当我必须在我的 [= 中实现范围函数时，我不知道如何处理它49=]。我找到的示例 http://codepen.io/christianacca/pen/yNWeOP 'age' 数据的自定义过滤算法正是我所关注的。

我的app.js

$http.get("http://hostname:port/variant/whole/1-10000", {cache: true})
    .then(function (response) {

        $scope.variants = response.data;

        $scope.data = $scope.variants;
        var self = this;
        self.variantFilterDef = {
            start: {
                id: 'number',
                placeholder: 'Start'
            },
            end: {
                id: 'number',
                placeholder: 'End'
            }
        };
        self.variantsTable  = new NgTableParams({
            page:1,
            count: 10

        }, {

            filterOptions: { filterFn: variantRangeFilter },
            dataset: $scope.data,
            filterLayout: "horizontal"
        });

        function variantRangeFilter(data, filterValues/*, comparator*/){
            return data.filter(function(item){
                var start = filterValues.start == null ? Number.MIN_VALUE : filterValues.start;
                var end = filterValues.end == null ? Number.MAX_VALUE : filterValues.end;
                return start <= item.pos && end >= item.pos;
            });
        }



        /* from this part on, it is working code but no 'Range'  function


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

        }, {
            total: $scope.variants.length,
            getData: function (params) {
                if (params.sorting()) {
                    $scope.data = $filter('orderBy')($scope.variants, params.orderBy());
                } else {
                    $scope.data = $scope.variants;
                }
                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;

        }


    });






 */



  });



});

我的variant.html

  <table ng-table="variantsTable" show-filter="true" class="table table-bordered table-striped table-condensed">
      <tr ng-repeat="variant in $data">


   <td data-title="'chrom'" sortable="'chrom'" filter="{ 'chrom': 'text' }" >
{{variant.chrom}}
   </td>

  <td data-title="'id'" sortable="'id'" filter="{ 'id': 'text' }" >
{{variant.id}}
  </td>


  <td data-title="'pos'" sortable = "'pos'" filter = "{ 'pos': 'text' }">
{{variant.pos}}
  </td>

非常感谢任何建议或意见，谢谢！

Answer 1

ID table 单元格的过滤器属性不正确。

<td data-title="'id'" sortable="'id'" filter="{ 'id': 'text' }">
    {{variant.id}}
</td>

改为：

<td data-title="'id'" sortable="'id'" filter="variantFilterDef">
    {{variant.id}}
</td>

编辑

经过反复试验，我成功了。我从您的代码示例开始并进行了一些更改。我使用了 ControllerAs 语法。但基本上修复是：

<td data-title="'chrom'" sortable="'chrom'" filter="{ 'chrom': 'text' }">

到<td data-title="'chrom'" sortable="'chrom'" filter="{ 'name': 'text' }">
<td data-title="'pos'" sortable = "'pos'" filter = "{ 'pos': 'text' }">

到<td data-title="'pos'" sortable="'pos'" filter="variantCtrl.variantFilterDef">
if (params.filter()) { self.data = $filter('filter')(self.data, {name: params.filter().name}); self.data = variantRangeFilter(self.data, params.filter()); } else { self.data = self.data; }

主要问题是需要使用 {name: params.filter().name}) 分离出 #3 中两列的过滤器，然后分别调用自定义 Pos 过滤器。

代码笔：http://codepen.io/anon/pen/QKBYOq?editors=1011

ng-table 数字范围过滤器不起作用

ng-table number range filter is not working

javascript

angularjs

ngtable