Wie filtere ich eine Zeile basierend auf beliebigen Spaltendaten mit einem einzigen Textfeld

Question

Ich verwende ng-table.

Ich habe versucht, Filter in der example angegeben, aber zum Filtern jeder Spalte muss ich separate Textfeld haben.

Aber was ich zu erreichen bin, ist ein Textfeld, jede Zeile basierend auf beliebigen Spaltendaten zu suchen.

Wie kann ich das erreichen?

Genau wie jquery datatable Suchfeld.

Answer 1

Dies ist, wie ich

Html

<input type="text" ng-model="searchUser"> <table ng-table="tableParams"> <tr ng-repeat="user in $data"> ... </tr> </table> 

Script

 var usersData = []; // initial data 

     $scope.tableParams = new ngTableParams({ 
      page: 1,   
      count: 7 
     }, { 
     counts : [7,14,21,28],   
     getData: function($defer, params) { 
      var searchedData = searchData(); 
      params.total(searchedData.length); 
      $scope.users = searchedData.slice((params.page() - 1) * params.count(), params.page() * params.count()); 
      $defer.resolve($scope.users);       
     }, 
     $scope: { $data: {} } 
    }); 


$scope.$watch("searchUser", function() { 
    $scope.tableParams.reload(); 
}); 

var searchData = function(){ 
    if($scope.searchUser) 
     return $filter('filter')(usersData,$scope.searchUser); 
    return usersData; 
} 

Reststandard ngtable Konfiguration hat

.

Answer 2

Basierend auf der ursprünglichen Frage, wenn Sie alle Ihre Daten zunächst laden, dann ist es ziemlich einfach. Ich benutzte diese http://ng-table.com/#/filtering/demo-api als Referenz und fügte dann typeahead-Filterung mit ng-change hinzu.

Ausblick:

<form name="awesomeForm" novalidate> 
<div class="input-group"> 
    <input type="text" class="form-control" placeholder="Search term" name="searchTerm" ng-model="globalSearchTerm" ng-change="applyGlobalSearch(globalSearchTerm)" required /> 
    <span class="input-group-btn"> 
     <button class="btn btn-default" type="submit" > 
      <span class="glyphicon glyphicon-search"></span> 
     </button> 
    </span> 
</div> 
</form> 

In Ihrem Controller (nachdem Sie die Daten in der Tabelle laden):

$scope.applyGlobalSearch = function(term) { 
    $scope.tableParams.filter({ $: term }); 
}