AngularJs фильтр поиск после нажатия пользователем 'entrer'

Question

Я собираюсь внедрить поисковую строку, в которой пользователь вводит строку в поле поиска и будет отфильтровываться при нажатии кнопки/отправки/нажатия ввода.

Я извлекаю так много данных из своей базы данных, и это делает мое приложение загружается очень медленно. Поэтому мне нужно, чтобы поиск не извлекал все данные (приводит к регистрации компьютера).

Ок .. Так вот мой взгляд

<div data-ng-app="PRApp"> 
    <div data-ng-controller="PRCtrl" class="ng-scope"> 
     <div class="row"> 

      <div class="row"> 
       <form data-ng-submit="changeDate()"> 
        <div class="col-xs-4"> 
         <h4><b>Search by Date :</b></h4> 
         <div class="col-xs-10"> 
          <div class="input-group"> 

           <span class="input-group-addon"> 
            <span data-ng-click="show=!show" class="glyphicon glyphicon-calendar"></span> 
           </span> 
           <input data-show="{{show}}" type="text" name="filter_fromDate" datepicker data-ng-model="filter_fromDate" 
            class="form-control" placeholder="mm/dd/yyyy" data-ng-minlength="10" /> 

          </div> 
         </div> 

         <br /> 
         <br /> 

         <div class="col-xs-10"> 
          <div class="input-group"> 

           <span class="input-group-addon"> 
            <span data-ng-click="show=!show" class="glyphicon glyphicon-calendar"></span> 
           </span> 
           <input data-show="{{show}}" type="text" name="filter_toDate" datepicker data-ng-model="filter_toDate" 
            class="form-control" placeholder="mm/dd/yyyy" data-ng-minlength="10" /> 

          </div> 
         </div> 
         <br /> 
         <br /> 
         <div class="col-xs-10"> 
          <input type="submit" class="btn btn-primary btn-sm" value="GO" /> 
         </div> 
        </div> 


       </form> 

       <div class="col-xs-4"> 

       </div> 


       <div class="col-xs-4"> 
        <div class="col-xs-10"> 
         <h4><b>Search :</b></h4> 
         <div class="input-group"> 
          <span class="input-group-addon"> 
           <span class="glyphicon glyphicon-search"></span> 
          </span> 
          <input type="text" name="search" data-ng-model="filter" class="form-control" placeholder="Search here (e.g. 151234 or Pille)" /> 
         </div> 
         <br /> 

        </div> 

        <div class="btn-group" role="group"> 
         <button data-ng-click="exportData()" class ="btn btn-warning"><i class ="glyphicon glyphicon-export"></i>Export to Excel </button> 
        </div> 
       </div> 



      </div> 
     </div> 
     <h2 data-ng-show="models == null ">Loading ...</h2> 
     <br /> 

     <div id="exportable"> 
      <table data-ng-show="models != null" class="table table-striped table-bordered table-hover" 
       id="PRTable"> 

       <tr class="titlerow"> 
        <th> 
         <a href="#" data-ng-click="sorting='RequestDate'; reverse = !reverse">PR Date <span 
          data-ng-show="sorting == 'RequestDate'"></span> 
         </a> 
        </th> 

        <th> 
         <a href="#" data-ng-click="sorting='RequestID '; reverse = !reverse">PR # <span data-ng-show="sorting == 'RequestID '"> 
         </span> 
         </a> 
        </th> 

        <th> 
         <a href="#" data-ng-click="sorting='PARNumber '; reverse = !reverse">PAR # <span 
          data-ng-show="sorting == 'PARNumber '"></span> 
         </a> 
        </th> 

        <th> 
         <a href="#" data-ng-click="sorting='ProgramName '; reverse = !reverse">Program <span 
          data-ng-show="sorting == 'ProgramName '"></span> 
         </a> 
        </th> 

        <th> 
         <a href="#" data-ng-click="sorting='FullName '; reverse = !reverse">Requestor <span 
          data-ng-show="sorting == 'FullName '"></span> 
         </a> 
        </th> 

        <th> 
         <a href="#" data-ng-click="sorting='PONo'; reverse = !reverse">PO # 
         </a> 
        </th> 
        <th> 
         <a href="#" data-ng-click="sorting='StatusID '; reverse = !reverse">PRStatus<span 
          data-ng-show="sorting == 'StatusID '"></span> 
         </a> 
        </th> 
        <th> 
         <a href="#" data-ng-click="sorting='Amount '; reverse = !reverse">Total Amount<span 
          data-ng-show="sorting == 'Amount '"></span> 
         </a> 
        </th> 

              <th> 
         <a href="#" data-ng-click="sorting='Amount '; reverse = !reverse">Last Action<span 
          data-ng-show="sorting == 'Amount '"></span> 
         </a> 
        </th> 
       </tr> 


       <tr data-ng-repeat="model in models | orderBy: sorting:reverse | filter : filter "> 

        <td>{{jsonDatetotext(model.RequestDate) | date:'MM/dd/yyyy'}}</td> 
        <td> 
         <a href="#" data-toggle="modal" data-target="#basicModalContent" data-ng-click="getSelectedPR(model)"> 
          {{model.RequestID}} 
         </a> 
        </td> 
        <td>{{model.PARNumber }}</td> 
        <td>{{model.ProgramName }}</td> 
        <td>{{model.FullName }}</td> 
        <td>{{model.PONo}}</td> 
        <td>{{StatusList[model.StatusID] | uppercase}}</td> 
        <td class="totalAmount"><span class="pull-right">{{model.TotalAmount | number:2}}</span> 
        </td> 
        <td>{{model.LastBy | lowercase}}</td> 
       </tr> 

       <tr> 
        <td colspan="9" ><h3><b>Total Amount : </b><span class="pull-right">{{models | sumbykey : 'TotalAmount' | number:2}}</span></h3> </td> 
       </tr> 

      </table> 
     </div> 
     <!-- /.Modal Na ni --> 

     <div class="modal fade" id="basicModalContent" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 
      aria-hidden="true"> 
      <div class="modal-dialog"> 
       <div class="modal-content"> 
        <div class="modal-header"> 

         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
        </div> 
        <div class="modal-body" id="exportablePRItems"> 
         <div class="table-responsive"> 

          <table class="table table-striped table-bordered table-hover" id="dataTables-example"> 
           <thead> 
            <tr> 

             <th>PR # 
             </th> 
             <th>Item Description 
             </th> 

             <th>Supplier 
             </th> 

             <th>Account 
             </th> 

             <th>Currency 
             </th> 

             <th>Amount 
             </th> 

             <th>(USD) Amount 
             </th> 
            </tr> 
           </thead> 

           <tbody data-ng-repeat="selectedPR in selectedModal.ItemList"> 
            <tr> 
             <td>{{selectedPR.RequestID}}</td> 
             <td>{{selectedPR.PartDesc}}</td> 
             <td>{{selectedPR.SupplierID }}</td> 
             <td>{{selectedPR.AccountType}}</td> 
             <td>{{selectedPR.CurrName }}</td> 
             <td data-ng-model="amount" class="amount">{{selectedPR.Amount | number:2}}</td> 
             <td>{{selectedPR.AmountUSD}}</td> 
            </tr> 
           </tbody> 
           <tr> 
            <td><span class="pull-right"><i class="glyphicon glyphicon-plus-sign"></i></span></td> 
            <td colspan="6"><b>Total Amount : </b>{{selectedModal.ItemList | sumbykey : 'Amount' | number:2}} </td> 
           </tr> 

          </table> 

         </div> 
         <footer> 
          <br /> 
            <button data-ng-click="exportDataItems()" class ="btn btn-warning"><i class ="glyphicon glyphicon-export"></i>Export Item </button></footer> 
        </div> 
        <div class="modal-footer"> 

         <button id="btnModalCancel" type="button" class="btn btn-default" data-dismiss="modal"> 
          Close</button> 
        </div> 
       </div> 
       <!-- /.modal-content --> 

       <!-- /.modal-dialog --> 
      </div> 
     </div> 
    </div> 
</div> 

.

А вот мой угловой:

<script type="text/javascript"> 
    var PRApp = angular.module('PRApp', []); 
    PRApp.controller('PRCtrl', ['$scope', '$http', function (scope, http) { 

     http.get('GetList').success(function (data) { 

      scope.models = data; 
      scope.selectedModal = null; 
     }); 
     scope.getStatus = http.get('GetStatusList').success(function (status) { 
      scope.StatusList = status 
     }); 

     scope.getSelectedPR = function (PR) { 
      scope.selectedModal = PR; 
     }; 


     //scope.totalPrice = function() { 
     // var total = 0; 
     // var amounts = this.closest('td').find('.totalAmount').text(); 
     // angular.forEach($scope.models.data, function (item) { 
     //  total += $(amounts).parseInt; 
     // }) 


     // return total; 
     //} 
     // scope.searchHere = 'Search here ... ' 



     scope.isEmpty = function (items) { 
      return angular.isArray(items) && items.length === 0; 
     }; 


     function GetbyDate(fr, t) { 
      var from = new Date(t) 
     }; 

     scope.changeDate = function() { 
      scope.models = null; 
      http.get('GetReportList?from=' + scope.filter_fromDate + '&to=' + scope.filter_toDate).success(
       function (data) { 
        scope.models = data; 
       }); 
     } 
     scope.jsonDatetotext = function (jsondate) { 
      // jsondate format: /Date(#############)/ 
      // substr(6) will remove '/Date(' 
      // parseInt will convert remaing string '#############' to int and ignores ')/' 
      return new Date(parseInt(jsondate.substr(6))); 
     }; 


     scope.exportData = function() { 
      var date = new Date(); 
      var d = date.getFullYear() + '-' + date.getMonth() + 1 + '-' + date.getDate(); 
      var blob = new Blob([document.getElementById('exportable').innerHTML], { 
       type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8" 

      }); 
      saveAs(blob, "Report_" + d + ".xls"); 
     }; 

     scope.exportDataItems = function() { 
      var date = new Date(); 
      var d = date.getFullYear() + '-' + date.getMonth() + 1 + '-' + date.getDate(); 
      var blob = new Blob([document.getElementById('exportablePRItems').innerHTML], { 
       type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8" 

      }); 
      saveAs(blob, "Items_"+ d +".xls"); 
     }; 


    }]); 


    PRApp.directive('datepicker', function() { 
     return { 
      require: 'ngModel', 
      link: function (scope, el, attr, ngModel) { 

       attr.$observe("show", function (val) { 
        if (val == 'true') { 
         $(el).datepicker("show"); 
        } 
        else { 
         $(el).datepicker("hide"); 
        } 
       }); 


       $(el).datepicker({ 
        minDate: '-5Y', 
        maxDate: 0, 
        dateFormat: 'MM d, yy', 
        onSelect: function (dateText) { 
         scope.$apply(function() { 
          ngModel.$setViewValue(dateText); 
         }); 
        } 
       }); 
      } 
     }; 
    }); 




    PRApp.filter('sumbykey', function() { 
     return function (data, key) { 
      if (typeof (data) === 'undefined' || typeof (key) === 'undefined') { 
       return 0; 
      } 

      var sum = 0.00; 
      for (var i = data.length - 1; i >= 0; i--) { 
       sum += parseFloat(data[i][key]); 
      } 

      return sum; 
     }; 

    }); 



</script> 

Answer 1

Вы можете использовать на стороне сервера подкачки. См. Пример here