提出せずに検索する場合のデータの表示方法| anglejs

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-changeを置く代わりにng-click

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

インコントローラ機能

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