하나의 텍스트 상자로 모든 열 데이터를 기반으로 행을 필터링하는 방법

Question

나는 ng-table을 사용하고 있습니다.

나는 example에 주어진 필터를 사용하려고했지만 각 열을 필터링하기 위해 별도의 텍스트 상자가 있어야합니다.

하지만 달성하고자하는 것은 모든 열 데이터를 기반으로 모든 행을 검색하는 하나의 텍스트 상자입니다.

어떻게하면됩니까?

jquery datatable 검색 상자와 똑같습니다.

Answer 1

이 내가 기본을 ngtable 구성을 남은

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

스크립트

HTML을

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

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

을

했던 방법이다.

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