using Ng-table, adding custom number range filter to a particular column

Question

I've been looking at all over the web to find the solution but I wasn't able to find a solution that fits my specific need.

So I have a table (built using ng-table module) with several columns like below.

headerA   headerB     headerC_start     headerC_end
-filter-  -filter-    -filter-           -filter-
AAA        AAAA        10                   10
BBB        BBBB        12                   12
CCC        CCCC        13                   13
DDD        DDDD        14                   14
EEE        EEEE        15                   15
FFF        FFFF        22                   22

Each filter right below header works as a 'contain' function filter. What I mean by 'contain' is, if I put '1' in the header C filter, it will show 10, 12, 13, 14 and 15 (since these numbers contain '1') with corresponding data from header A and B.

For header A and B , 'contain' is fine, but I want header C to have 'range' function instead of 'contain. So my purpose is to input the minimum value at headerC_start and maximum value at headerC_end, and I want the table to filter out all the numbers in between that minimum and maximum with all corresponding information form header A and B. So If I put 10 at headerC_start and 14 at headerC_end, it will only show 10, 12,13 and 14 with all corresponding information from header A and header B.

I've tried several different ways to solve this problem including writing my own custom filter function, but I was unable to apply that custom filter function to header_C since all header A, B and C are bound to ng-table module.

Below are snippets of my codes.

---html

<table ng-table="someTable" show-filter="true" class="table table-bordered table-striped table-condensed">
<tr ng-repeat="item in data">


    <td data-title="'headerA'" sortable="'headerA'" filter="{ 'headerA': 'text' }" >
        {{item.attributeA}}
    </td>

    <td data-title="'headerB'" sortable="'headerB'" filter="{ 'headerB': 'text' }" >
        {{item.attributeB}}
    </td>


    <td data-title="'headerC_start'" sortable = "'headerC_start'" filter = "{'headerC_start':'text'}">
        {{item.attributeC}}
    </td>


    <td data-title ="'headerC_end'" sortable = "'headerC_end'" filter="{'headerC_end':'text'}">
        {{item.attributeC}}
    </td>

---JS

angular.module('someApp', ['ngTable', 'ui.bootstrap', 'mainApp'])

.config(function someAppConfig($routeProvider) {

    $routeProvider
        .when('/some', {
            templateUrl: 'view/some.html',
            controller: 'some_table_controller'
        });
})



.controller('some_table_controller', function ($scope, $http, $filter, NgTableParams) {


    $http.get("http://127.0.0.1:5000/some/range/xxxx", {cache: true})
        .then(function (response) {
            $scope.something = response.data;


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

            },

                {


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

        });

    });
});

For several hours, I've tried the most right one on this example, (custom filter function)

http://codepen.io/christianacca/pen/yNWeOP

But I couldn't find a way to implement the example code to my script.

I would really appreciate any input!!!!

Thanks

Pedro Robles · Accepted Answer · 2017-02-28 14:00:12Z

1

I have just solved a similar issue. I used custom filter

HTML (using Thymeleaf)

<td th:attr="data-title=|'My Header'|" filter="{'headerA' : 'numberRange'}">

Filter:

<script type="text/ng-template" id="ng-table/filters/numberRange.html">
    <form class="form-inline">
        <span>Between</span>
        <input type='number' ng-model="params.filter()[name + 'Min']" name="filter-numberRange" class="form-control" min="1" />
        <span>and</span>
        <input type='number' ng-model="params.filter()[name + 'Max']" name="filter-numberRange" class="form-control" min="1" />
     </form>
</script>

On your javascript

var minRange = params.filter().headerAMin;
var maxRange = params.filter().headerAMax;

Hope it helps

answered Feb 28, 2017 at 14:00

Pedro Robles

2155 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

using Ng-table, adding custom number range filter to a particular column

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related