NG-表號範圍過濾器不工作

Question

• 什麼，我試圖做

我試圖讓我的專欄的人拿（一列）排名第二，這樣我就可以過濾數字數據的範圍僅適用於此列。所有其他排序和分頁，並通過'包含文本'篩選工作正常，但我不知道我將如何去做一個特定的列有'範圍'過濾器。什麼，我想

column_header1 columns_header2   column_header3 

contain_filter1 contain_filter2   filter3_min_number 
              filter3_max_number 

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

• 圖形表示我有什麼到目前爲止

我發現從NG-表模塊網站一個例子，我試圖實現他們的代碼我的，但我不知道如何處理它，當我必須在我的'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> 

編輯

有點試驗和錯誤我有工作之後。我從你的代碼示例開始並做了一些修改。我使用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; }

主要問題是需要通過使用{name: params.filter().name}) &然後分別調用自定義Pos過濾器來分離＃3中兩列的過濾器。

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