Angular Material Data table search Filter

Question

I am trying to apply the a dynamic angular filter to the md data table to search through the data on the grid. however it doesn't seem to be working here is a small exapmple of what I am trying to accomplish:

    <md-input-container>
      <label> Search Table </label>
       <input  ng-model="filter.search"> 
    </md-input-container>

  <tr md-row md-select="dessert" md-auto-select ng-repeat="dessert in desserts.data | filter: filter.search | orderBy: query.order | limitTo: query.limit : (query.page -1) * query.limit">

I'm using this code pen for the md-data-table: codepen.io/anon/pen/qbLaMb all I'm adding is a search input field to try an filter the data — Flash
– Flash, Commented Feb 28, 2017 at 14:26
Thanks! the only thing actually is, I was trying to configure it to work like this example with this table: datatables.net if you type part of a word from one column press space, then type part of another word from another column it filters accordingly. Do you know if this is possible with the md data table or is it just a feature with that particular table. — Flash
– Flash, Commented Feb 28, 2017 at 19:34

nextt1 · Accepted Answer · 2017-02-28 20:53:31Z

2

As you showed, I am adding custom filter which will do as described by you.

Here is the custom filter.

$scope.filters = [];
$scope.$watch('filter.search', function(newValue, oldValue) {
 if(newValue != undefined){
  $scope.filters = newValue.split(" ");
 }
})

$scope.searachData = {};

$scope.customSearch = function(item) {
$scope.searachData.status = true;

angular.forEach($scope.filters, function(value1, key) {
  $scope.searachData.tempStatus = false;
  angular.forEach(item, function(value2, key) {
    var dataType = typeof(value2);

    if(dataType == "string" && (!value2.includes('object'))){
      if(value2.toLowerCase().includes(value1)){
        $scope.searachData.tempStatus = true;
      }
    }else if(dataType == "object"){
      var num = value2.value.toString();
      if(num.includes(value1)){
        $scope.searachData.tempStatus = true;
      }
    }
  });
          $scope.searachData.status = $scope.searachData.status & $scope.searachData.tempStatus;
});

return $scope.searachData.status;
};

Here is the working Example.

answered Feb 28, 2017 at 20:53

nextt1

4,0082 gold badges20 silver badges27 bronze badges

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

6 Comments

Flash Over a year ago

Thanks! I will try an follow this example

Flash Over a year ago

It works fine when my data is hard coded. but when I get it from a service it seems to throw a lot of console errors. but I am trying to debug it now

nextt1 Over a year ago

Because of your object structure, you might get some errors. Please provide your object structure and I'll do necessary changes.

Flash Over a year ago

Thanks it's something like:

object[ 	{ name: john Adams, 	  weight: 178, 	  Age:     27 	  sport:  basketball 	},          { name: Michael Johnson, 	  weight: 188, 	  Age:     22 	  sport:  Football 	}, 	{ name: Steven Richards 	  weight: 177, 	  Age:     21 	  sport:  Baseball 	} ]

Flash Over a year ago

The error the console is giving is Cannot read property 'toString' of undefined

|

Collectives™ on Stack Overflow

Angular Material Data table search Filter

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related