如何根據單個文本框中的任何列數據篩選一行

Question

我正在使用ng-table。

我試着使用在example給出的過濾器，但是爲了過濾每一列我需要有單獨的文本框。

但我想要實現的是，一個文本框根據任何列數據搜索任何行。

我該如何做到這一點？

就像jquery datatable搜索框。

Answer 1

這是我怎麼沒

的Html

<input type="text" ng-model="searchUser"> 

    <table ng-table="tableParams"> 
     <tr ng-repeat="user in $data"> 
     ... 
     </tr> 
    </table> 

腳本

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

其餘默認ngtable配置。

Answer 2

基於原來的問題，如果你最初加載所有的數據，那麼這很容易。我用這個http://ng-table.com/#/filtering/demo-api作爲參考，然後用ng-change添加了前面的過濾。

查看：

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

在你的控制器（加載在你的表中的數據後）：

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