提前搜索角度js

时间:2017-01-24 09:34:52

标签: angularjs

根据点击事件无效,提前搜索多个字段的角度js。我想在多个列上执行搜索,并通过单击搜索按钮仅发送一个搜索请求,而不是每次键入时发送请求在输入字段上。

OdbcCommand ODBCCommand = new OdbcCommand("addMasterBarangKeluar", ODBCConnection); 

1 个答案:

答案 0 :(得分:3)

<强>要求:

通过点击搜索按钮只发送一个搜索请求,而不是每次输入输入字段时都发送请求。

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