제출하지 않고 검색 할 때 데이터를 보는 방법 | angularjs

Question

검색 프로세스를 더 빠르게하기 위해 내 클라이언트가 제출하지 않고도 검색 상자가 가득 찼을 때 데이터를 보도록 요청했습니다. 제출시 코드가 올바르게 작동하고 코드를 변경해야하므로 원하는 결과를 얻을 수 있습니다. 결과. 이것은 각도 js를 가진 나의 첫번째 프로젝트, 나는이 기술에 아주 새롭다. 미리 감사드립니다.

HTML View: 
<input id="searchInput" type="text"/> // search box where 

// the function below "getSearchResults()" will get results when submitting 
<input ng-click="getSearchResults()" type="submit"/> 

<table> 
    <thead> 
     <tr> 
      <th>NOM</th> 
      <th>TELEPHONE</th> 
      <th>LOCATION</th> 
      <th>CODE</th> 
     </tr> 
    </thead> 
    <tbody > 

     //view the data 
     <tr ng-repeat="c in clients"> 
      <td>{{c.firstname}} {{c.lastname}}</td> 
      <td>{{c.telephone}}</td> 
      <td>{{c.location}}</td> 
      <td>{{c.code}}</td> 
     </tr> 
    </tbody> 
</table> 

Js source: 


var app = angular.module('DMDGroup', []); 
$scope.clients; 
app.controller('ClientALL', function($scope, $http) { 

/* the function put all results in the scope variable (client) in a json 
    form and the results viewed with the ng-repeat on the tr tag*/ 

$scope.getSearchResults=function(){ 
    var searchKeyWord=$("#searchInput").val(); 
    var url = '../php/clients.php'; 
    var data = {"function":"getClients", 
      "searchKeyWord":searchKeyWord}; 

    var options={ 
     type : "get", 
     url : url, 
     data: data, 
     dataType: 'json', 
     async : false, 
     cache : false, 
     success : function(response,status) { 
      $scope.clients = response; 
      $scope.$apply(); 
     }, 
     error:function(request,response,error){ 
      alert("Error: " + error + ". Please contact developer"); 
     } 
    }; 
    $.ajax(options); 
} 
} 

은 내가

Answer 1

이 ng-click

<input ng-change="getSearchResults(searchVal)" ng-model="searchVal" class="searchClientBtn" type="submit"/> 

대신 ng-change을 넣어 난 내보기의 이미지를 첨부 할 수 있습니다, 테이블이 검색 결과에 따라 달라집니다에 직접 데이터를 변경하려면 인 컨트롤러 기능

$scope.getSearchResults=function(value){ 
    var url = '../php/clients.php'; 
    var data = {"function":"getClients", 
      "searchKeyWord": value}; 

    var options={ 
     type : "get", 
     url : url, 
     data: data, 
     dataType: 'json', 
     async : false, 
     cache : false, 
     success : function(response,status) { 
      $scope.clients = response; 
      $scope.$apply(); 
     }, 
     error:function(request,response,error){ 
      alert("Error: " + error + ". Please contact developer"); 
     } 
    }; 
    $.ajax(options); 
}