нг-фильтр таблицы диапазон номеров не работает

Question

• , что я пытаюсь сделать

Я пытаюсь сделать один из моих столбцов взять два числа (в одном столбце), так что я могу фильтровать числовые данные по диапазону только для этого столбца. Все другие сортировки и разбиение на страницы и фильтрация с помощью «содержать текст» работают нормально, но я просто не уверен, как мне сделать только один конкретный столбец для фильтрации «диапазона».

• графическое представление о том, что я хочу

  column_header1 columns_header2   column_header3 
  
  contain_filter1 contain_filter2   filter3_min_number 
                filter3_max_number 
  
      data     data     numeric data 
      .     .       . 
      .     .       . 
      .     .       . 
  

• То, что я до сих пор

Я нашел один пример с веб-сайта модуля нг-таблицы, и я попытался реализовать свой код для моего, но я не знаю, как подойти к нему, когда мне нужно реализовать функцию диапазона внутри моей 'getData'. Пример, который я нашел http://codepen.io/christianacca/pen/yNWeOP Настраиваемый алгоритм фильтрации по «возрастным» данным был тем, на что я смотрел.

• мои 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 неверен.

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

Изменить его:

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

EDIT

После небольшого количества проб и ошибок я это работает. Я начал с вашего примера кода и внес ряд изменений. Я использовал синтаксис ControllerAs.Но по существу исправления являются:

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

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

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

   в <td data-title="'pos'" sortable="'pos'" filter="variantCtrl.variantFilterDef">

3. 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; }

Основная проблема заключалась в необходимости отделить фильтры двух столбцов в # 3, используя {name: params.filter().name}) &, затем вызывая индивидуальный фильтр Pos отдельно.

Codepen: http://codepen.io/anon/pen/QKBYOq?editors=1011