搜索时如何查看数据而不提交| 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);
}
}

我希望直接更改表中的数据取决于搜索结果，我将附上我的view的图像

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