角度jsでのアドバンス検索

Question

clickイベントが発生していないため、複数のフィールドの角度jsのアドバンス検索..複数のカラムで検索を実行し、リクエストを送信することで検索butttonをクリックして検索するリクエストを1つだけ送信したい私が入力フィールドに入力するたびに。

<script> 
var app = angular.module('myApp', ['angularUtils.directives.dirPagination']); 
app.controller('myCtrl', function($scope, $http) { 

    $http.get("<?php echo 'process.php';?>") 
    .then(function(response) { 
    $scope.prospectsList = response.data; 
    }); 

    $scope.searchTable = function(){ 
    $scope.searchParam = $scope.search ; 
    } 

}); 
</script> 


<tr> 
    <th align="center"><input type="text" ng-model="search.fname"/></th> 
    <th align="center"><input type="text" ng-model="search.lname"/></th> 
    <th align="center"><input type="text" ng-model="search.email"/></th> 
    <th align="center"><input type="submit" ng-model="searchList" ng-click ="searchTable();" value='Search'/> </th> 
</tr> 

<tr dir-paginate = "data in prospectsList |filter:searchParam|itemsPerPage:10" > 
    <th align="center"> {{data.first_name}} </th> 
    <th align="center"> {{data.last_name}} </th> 
    <th align="center"> {{data.email}} </th> 
    <th align="center"> {{data.country}} </th> 

</tr> 

Answer 1

要件：ない私は、入力フィールドに入力したときに毎回リクエストを送信することにより、検索butttonをクリックして検索する

送信唯一の要求。

HEreは必要な解決策です。

HTML：

<div class="container"> 
    <div class="row"> 
     <div class="col-lg-8"> 
     <div ng-controller="MyController" class="my-controller"> 

      <p>Type a letter in the input field:</p> 

      <input type="text" ng-model="search.first_name" /> 
      <input type="text" ng-model="search.last_name" /> 
      <input type="text" ng-model="search.email" /> 
      <input type="submit" ng-model="searchList" ng-click="searchTable();" value='Search' /> 
      <ul> 
      <li dir-paginate="data in prospectsList |filter: searchParam | itemsPerPage: 2"> 
       {{data.first_name}} {{data.last_name}} {{data.email}} {{data.country}} 
      </li> 
      </ul> 

      <div ng-controller="OtherController" class="other-controller"> 
      <div class="text-center"> 
       <dir-pagination-controls boundary-links="true" on-page-change="pageChangeHandler(newPageNumber)" template-url="dirPagination.tpl.html"></dir-pagination-controls> 
      </div> 
      </div> 
     </div> 
     </div> 
    </div> 
</div> 

コントローラコード：

var app = angular.module('myApp', ['angularUtils.directives.dirPagination']); 
app.controller('myCtrl', function($scope, $http) { 

    $http.get("<?php echo 'process.php';?>") 
    .then(function(response) { 
     $scope.prospectsList = response.data; 
    }); 

    $scope.search = {}; 
    $scope.searchParam ={}; 
    $scope.searchTable = function(){ 
    $scope.searchParam = JSON.parse(JSON.stringify($scope.search)); 
    } 
    $scope.prospectsList=[{ first_name: "111",last_name: "222",email: "333", country: "casdasda"},{ first_name: "777", last_name: "888",email: "gfgdf", country: "casdasda"},{ first_name: "test", last_name: "555",email: "gfgdf", country: "casdasda"}]; 

}); 

HERE IS A WORKING DEMO