ngTable filter with comma separated

Question

I have created an application in AngularJs with ngTable, the table is having filter as well as sorting feature, the application is working fine but as well as filtering and sorting also working fine, but the problem is that i need to filter the designation column with comma separated like as shown below

scientist,doctor

right now it will filter based on a single value

JSFiddle

can anyone please tell me some solution for this

var app = angular.module('app', ['ngTable']);

app.controller('IndexCtrl', function ($scope, $filter, ngTableParams) {
     $scope.peoples = [{
        "id": 145,
            "desig": "doctor",
            "name": "Manu",
            "place": "ABCD",
            "group": "ime123"
    }, {
        "id": 148,
            "desig": "engineer",
            "name": "John",
            "place": "POLK",
            "group": "ime148"
    }, {
        "id": 150,
            "desig": "scientist",
            "name": "Mary",
            "place": "USE",
            "group": "ime148"
    }];
    $scope.peoplesCopy = $scope.peoples;
    $scope.mytable = new ngTableParams({
        page: 1,            // show first page
        count: 10,          // count per page
        sorting: {
            name: 'desc'
        }
        
    }, {
        getData: function ($defer, params) {
           $scope.peoples = angular.copy($scope.peoplesCopy);
           var filteredData = $filter('filter')($scope.peoples, params.filter());
             $scope.peoples = $filter('orderBy')(filteredData, params.orderBy());
             $defer.resolve($scope.peoples);
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script src="http://bazalt-cms.com/assets/ng-table/0.3.0/ng-table.js"></script>
<body ng-app="app">
<div ng-controller="IndexCtrl">
    <table border="1" ng-table="mytable" show-filter="true">
            <tr ng-repeat="people in $data">
                <td sortable="id" data-title="'Id'">{{people.id}}</td>
                <td sortable="desig" filter="{ 'desig': 'text' }" data-title="'Desig'">{{people.desig}}</td>
                <td sortable="name" data-title="'Name'">{{people.name}}</td>
                <td sortable="place" data-title="'Place'">{{people.place}}</td>
            </tr>
    </table>
</div>
</body>

Jon Kartago Lamida · Accepted Answer · 2014-11-10T09:23:20.397

2

According to angularjs documentation, beside string expression, we also can pass function for filter argument. You can achieve the requirement using custom filter function. The function have to filter list based on given comma separated string.

More or less change the your getData method with following. The updated jsfiddle is here: http://jsfiddle.net/ykktuo33/3/

getData: function ($defer, params) {
       $scope.peoples = angular.copy($scope.peoplesCopy);
       var filteredData = $filter('filter')($scope.peoples,
        // This is the custom filter function
        function(val,idx){
           // entered filter in column
           var filt = params.filter();
           if(filt && filt.desig) {
               var searchfilter = filt.desig;
               // split multiple filter comma separated
               var filterKeys = searchfilter.split(',');
               if(filterKeys) {
                   var ret = false;
                   // iterate multiple entered filter and return true for match
                   for(var key in filterKeys) {
                       var listVal = val.desig;
                       // call trim to remove whitespace between search filter keys
                       ret = (listVal.indexOf(filterKeys[key].trim())) > -1 || ret;
                   }
                   return ret;
               }  
           }
           return true;

  });
         $scope.peoples = $filter('orderBy')(filteredData, params.orderBy());
         $defer.resolve($scope.peoples);
    }

edited Nov 10 '14 at 09:23

answered Nov 10 '14 at 08:16

Jon Kartago Lamida

827
1
7
12

if they put space after `,` how can we handle – Alex Man Nov 10 '14 at 09:03
Just call trim() to the filterKeys. See above updated answer above and check updated jsFiddle http://jsfiddle.net/ykktuo33/2/ – Jon Kartago Lamida Nov 10 '14 at 09:05
one more issue....since i am using jshint .....i am getting [L63:C30] W089: The body of a for in should be wrapped in an if statement to fil ter unwanted properties from the prototype. `for (var key in filterKeys) {` – Alex Man Nov 10 '14 at 09:12
Hi Alex, I think that is jslint warning. I belive there is no problem in functional wise. You can update the code accordingly based on this stackoverflow thread. http://stackoverflow.com/questions/1963102/what-does-the-jslint-error-body-of-a-for-in-should-be-wrapped-in-an-if-statemen – Jon Kartago Lamida Nov 10 '14 at 09:16
okay i have resloved that...just one more question...is this filter case sensitive,....i guess yes.....ow to make it case not sensitive – Alex Man Nov 10 '14 at 09:17
i guess for that i need to use `.toLowerCase()` am i right – Alex Man Nov 10 '14 at 09:20
To make not case sensitive just add toLowerCase or toUpperCase of both compared searchfilter and list value. Replace this line ret = (listVal.indexOf(filterKeys[key].trim())) > -1 || ret; to ret = (listVal.toLowerCase().indexOf(filterKeys[key].toLowerCase().trim())) > -1 || ret; – Jon Kartago Lamida Nov 10 '14 at 09:21

ngTable filter with comma separated

1 Answers1