Блог

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

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

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

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

• Что у меня есть до сих пор

Я нашел один пример с веб-сайта модуля ng-table и попытался внедрить их код в свой, но я не знаю, как подойти к нему, когда мне нужно реализовать функцию range внутри моего 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 amp;amp; 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>
      

Я был бы очень признателен за любое предложение или любой вклад, спасибо!

Атрибут фильтра ячейки таблицы идентификаторов неверен.

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

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

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

Редактировать

После нескольких проб и ошибок у меня это работает. Я начал с вашего примера кода и внес ряд изменений. Я использовал синтаксис 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}) amp;, а затем отдельного вызова пользовательского Pos-фильтра.

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