CODEWITHSUNDEEP
angularjs
sam
sam

Reputation: 39

Advance search in angular js

Advance search in angular js for more than one filed dependent on click event not working ..I want to perform search on multiple column and send only one request to search by clicking search buttton ,not by sending request every time when i type on input fields. 

<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>

Upvotes: 2

Views: 592

Answers (1)

Sravan
Sravan

Reputation: 18647

Requirement:

send only one request to search by clicking search buttton ,not by sending request every time when i type on input fields.

HEre is your required solution.

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

Upvotes: 3

Related Questions