CODEWITHSUNDEEP
angularjsangular-materialangular-filters
Flash
Flash

Reputation: 1014

Angular Material Data table search Filter

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">

Upvotes: 2

Views: 7507

Answers (1)

nextt1
nextt1

Reputation: 3988

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.

Upvotes: 2

Related Questions