Jessi Jessi - 1 month ago 20
AngularJS Question

ng-table number range filter is not working


  • what I am trying to do



I am trying to make one of my columns to take two number (in one column), so I can filter the numeric data by range just for this column. All other sort and pagination and filter by 'contain text' is working fine but I am just not sure how would I go about making just one particular column to have 'range' filter.


  • graphical representation of what I want

    column_header1 columns_header2 column_header3

    contain_filter1 contain_filter2 filter3_min_number
    filter3_max_number

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

  • What I have so far



I found one example from ng-table module website and I tried to implement their code to mine but I don't know how to approach it when I have to implement the range function inside my 'getData'.
Example that I found http://codepen.io/christianacca/pen/yNWeOP
The custom filter algorithm on 'age' data was what I was looking at.


  • my 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;

    }


    });






    */



    });



    });



    • my 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>




I would really appreciate any suggestion or any input, thanks!

Answer

The filter attribute of the ID table cell is not correct.

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

Change it to:

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

EDIT

After a bit of trial and error I have it working. I started from your code sample and made a number of changes. I used ControllerAs syntax. But essentially the fixes are:

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

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

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

    to <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; }

The main issue was the need to separate out the filters of the two columns in #3 by using {name: params.filter().name}) & then calling the custom Pos filter separately.

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

Comments