Erweiterte Suche in eckig js

Question

Erweiterte Suche in eckigen js für mehr als ein Feld abhängig von Klickereignis nicht funktioniert ..Ich möchte die Suche in mehreren Spalten und senden nur eine Anfrage zu suchen, indem Sie auf Suche buttton, nicht durch Senden von Anfrage jedes Mal, wenn ich Eingabefelder eintippe.

<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

Voraussetzung:

senden nur eine Anfrage, indem Sie auf Suche buttton suchen, nicht nach Anforderung sendet jedes Mal, wenn ich auf Eingabefelder eingeben.

HE ist Ihre erforderliche Lösung.

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> 

Controller-Code:

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