Come faccio a filtrare una riga in base a qualsiasi colonna di dati con una singola casella di testo

Question

Sto usando ng-table.

Ho provato a utilizzare il filtro fornito nello example, ma per filtrare ogni colonna ho bisogno di avere una casella di testo separata.

Ma quello che sto cercando di ottenere è, una casella di testo per cercare qualsiasi riga in base ai dati di ogni colonna.

Come posso ottenere questo?

Proprio come nella casella di ricerca jquery datatable.

Answer 1

Ecco come ho fatto

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; 
} 

rimanente configurazione predefinita ngtable.

Answer 2

In base alla domanda iniziale, se si caricano inizialmente tutti i dati, è piuttosto semplice. Ho usato questo http://ng-table.com/#/filtering/demo-api come riferimento e aggiunto il filtro typeahead con ng-change.

Vista:

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

Nel vostro controller (dopo aver caricato i dati nella tabella):

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