角度表中的过滤仅适用于当前页面

Question

I'm working on Angular app page to filter a table with pagination but the search text filters only the current page's records.

The requirement is to filter the entire data set not only the current page. Is there any possible way to make it work? Thanks.

Here is my controller script

//individual controllers separated by functionality

sysmonControllers.controller("serverConfigController", ['$scope', 'userProfileService','sharedUtilService','$mdToast','notificationServices','$filter','configService','notificationServices',
                                                 function($scope,userProfileService,sharedUtilService,$mdToast,notificationServices,$filter,configService,notificationServices){



             $scope.serverToConfigure = {};

             $scope.searchPhrase='';
             $scope.monProcSearchPhrase='';
             $scope.availableProcSearchPhrase='';

             $scope.activeConfigView='server';
             $scope.processToMonitor=[];


             $scope.errorKeywords=[];
             $scope.warningKeywords=[];
             $scope.healthyKeywords=[];
             $scope.registeredUsers=[];

             $scope.addUser = function(user){
                 var tempUser = {
                         firstName: user.firstName,
                         lastName: user.lastName,
                         emailNotificationsId:{
                             emailId: user.emailNotificationsId.emailId,
                             serverId:null
                         },
                         emailId: user.emailId,
                         phoneNumber: user.phoneNumber,
                         country: null,
                         lastUpdate: null,
                         primaryAddr: null,
                         secondaryAddr: null,
                         servers: null,
                         state: null,
                         zipcode: null
                 };

                 $scope.serverToConfigure.emailNotifications.push(tempUser);
                 $scope.cards.showRegisterArea =! $scope.cards.showRegisterArea;
             }

             $scope.removeUser = function(userToRemove){
                 if($scope.serverToConfigure.emailNotifications.indexOf(userToRemove) != -1){
                     index = $scope.serverToConfigure.emailNotifications.indexOf(userToRemove);
                     $scope.serverToConfigure.emailNotifications.splice(index, "1");
                 }

             }


             $scope.addLogLocation = function(logLocation){
                 var templogLocation = {
                         location_id: null,
                         server_id: null,
                         locationPath: logLocation.locationPath
                 };

                 $scope.serverToConfigure.logLocations.push(templogLocation);
                 $scope.cards.showLogArea =! $scope.cards.showLogArea;
             }

             $scope.removeLogLocation = function(logLocationToRemove){
                 if($scope.serverToConfigure.logLocations.indexOf(logLocationToRemove) != -1){
                     index = $scope.serverToConfigure.logLocations.indexOf(logLocationToRemove);
                     $scope.serverToConfigure.logLocations.splice(index, "1");
                 }

             }

             //have them closed for now
             $scope.cards ={
                     showMonProcs: true,
                     showLogArea: true,
                     showEmailArea: true,
                     showRegisterArea: false
             };

              $scope.query = {
                        serverOrder:'serverName',
                        processOrder:'processName',
                        limit: 5,
                        page: 1,
                        multiSelect: false

                      };




              $scope.setServerToConfigure=function(server){

                    $scope.serverToConfigure=server;
                     $scope.errorKeywords=server.errorKeywords.split(",");
                     $scope.warningKeywords=server.warningKeywords.split(",");
                     $scope.healthyKeywords=server.healthyKeywords.split(",");

              }


              $scope.removeMonProc=function(processId){

                  for(var i=0; i<$scope.serverToConfigure.serverProcess.length; i++){
                      if($scope.serverToConfigure.serverProcess[i].processId===processId){
                          $scope.serverToConfigure.serverProcess[i].monitorFlg='N';
                          $scope.serverToConfigure.serverProcess[i].dirty='true';
                      }
                  }


                  }

                  $scope.addMonProcs=function(){

                      for(var i=0; i< $scope.processToMonitor.length; i++){
                          for(var j=0; j<$scope.serverToConfigure.serverProcess.length; j++){
                              if($scope.processToMonitor[i].processId===$scope.serverToConfigure.serverProcess[j].processId){
                                  $scope.serverToConfigure.serverProcess[j].monitorFlg='Y';
                                  $scope.serverToConfigure.serverProcess[j].dirty='true';
                              }
                          }

                      }

                  }


                  $scope.refreshServers = function() {
                      $scope.loadEnvironments();
                  }


              $scope.toggleConfigView=function(view){
                    // reset page
                    if($scope.activeConfigView == 'config'){
                        $scope.query.page = 1;
                    }

                  switch(view){

                  case'server':
                      $scope.activeConfigView=view;
                      break;

                  case'config':
                      $scope.activeConfigView=view;
                      break;


                  }

              }


              $scope.formatKeywordsToSave = function(keywords){

                  var stringBuilder= '';
                  for(var i=0; i<keywords.length; i++){
                      stringBuilder=stringBuilder+ ','+keywords[i];
                  }

                  return stringBuilder;
              }




              $scope.saveServerConfig=function(){
                  $scope.showSaveProgress=true;
                  var tempMemChart = $scope.serverToConfigure.memoryChart;
                  $scope.serverToConfigure.memoryChart=null;
                  var serverToSave= angular.copy($scope.serverToConfigure) ;
                  $scope.serverToConfigure.memoryChart=tempMemChart;

                  serverToSave.errorKeywords=$scope.errorKeywords.join(",");
                  serverToSave.warningKeywords=$scope.warningKeywords.join(",");
                  serverToSave.healthyKeywords=$scope.healthyKeywords.join(",");

                  serverToSave.lastUpdate= new Date();
                  serverToSave.registeredUsers = $scope.registeredUsers;


                  for(var i=0; i<serverToSave.serverProcess.length; i++) {
                      var servers = new Object();
                      servers.serverId= serverToSave.serverId;
                      serverToSave.serverProcess[i].servers=servers;

                  }

                  for(var i=0; i<serverToSave.serverLogs.length; i++) {
                      var servers = new Object();
                      servers.serverId= serverToSave.serverId;
                      serverToSave.serverLogs[i].servers=servers;

                  }

                  for(var i=0; i<serverToSave.emailNotifications.length; i++) {
                      var emailNotifications = new Object();
                      var emailNotificationsId = new Object();
                      emailNotificationsId.emailId = serverToSave.emailNotifications[i].emailNotificationsId.emailId;
                      emailNotifications.country = serverToSave.emailNotifications[i].country;
                      emailNotifications.firstName = serverToSave.emailNotifications[i].firstName;
                      emailNotifications.lastName = serverToSave.emailNotifications[i].lastName;
                      emailNotifications.phoneNumber = serverToSave.emailNotifications[i].phoneNumber;
                      emailNotifications.lastUpdate = serverToSave.emailNotifications[i].lastUpdate;
                      emailNotifications.primaryAddr = serverToSave.emailNotifications[i].primaryAddr;
                      emailNotifications.secondaryAddr = serverToSave.emailNotifications[i].secondaryAddr;
                      emailNotifications.state = serverToSave.emailNotifications[i].state;
                      emailNotifications.zipcode = serverToSave.emailNotifications[i].zipcode;

                      var servers = new Object();
                      servers.serverId = serverToSave.serverId;

                      emailNotifications.servers = servers;
                      emailNotificationsId.serverId = servers.serverId;
                      emailNotifications.emailNotificationsId = emailNotificationsId;

                      serverToSave.emailNotifications[i] = emailNotifications;

                  }


                  configService.saveServerConfig(serverToSave, function(saveResponse){
                        var response= saveResponse.result;

                        if(response==="SUCCESS"){
                              $scope.isSavingData=false;
                               console.log("success!");

                               notificationServices.showToast('success','top right',2000,'server-summary-table');
                               $scope.refreshServers();
                               $scope.showSaveProgress=false;

                        }


                        else{
                             $scope.isSavingData=false;
                              console.log("fail!");
                              $scope.showSaveProgress=false;
                              notificationServices.showToast('failure','top right',2000,'server-summary-table');
                        }

                    });
            $scope.init=function(){

            }
            $scope.init();
}])

and my table in HTML:

 <md-card-content id="server-options-summary" ng-show="activeConfigView==='server'">
          <md-table-container style="color:white">
          <table md-table md-row-select multiple="false" ng-model="serverToConfigure" md-progress="promise" >
            <thead md-head md-order="query.serverOrder" md-on-reorder="">
              <tr md-row>
                <th md-column  md-order-by="serverId"><span>Server ID</span></th>
                 <th md-column  md-order-by="serverName"><span>Server Name</span></th>
                 <th md-column  md-order-by="environmentName"><span>Environment </span></th>
                <th md-column  md-order-by="lastUpdated">Last Updated</th>
                 <th md-column  md-order-by="statusColor">Server Status</th>
                 <th md-column  >Action</th>
              </tr>
            </thead>
            <tbody md-body >

              <tr md-row md-select="serverToConfigure" ng-repeat="s in $parent.servers  | orderBy: query.serverOrder | limitTo: query.limit : (query.page -1) * query.limit | filter :searchPhrase">
                <td md-cell>{{s.serverId}}</td>
                <td md-cell>{{s.serverName}}</td>
                <td md-cell>{{s.environmentName}}</td>
                <td md-cell>{{s.lastUpdated | date :"short"}}</td>
                <td md-cell><md-icon ng-style="{'color': generateStatusColor(s.statusColor)}">{{getIconByColor(s.statusColor)}}</md-icon></td>
                <td md-cell><md-button class="md-fab md-mini" style="background-color:#86bc25" ng-click="toggleConfigView('config');setServerToConfigure(s)" ><md-icon>build</md-icon> <md-tooltip >configure</md-tooltip></md-button></td>
              </tr>
            </tbody>
          </table>
          </md-table-container>
<md-table-pagination style="color:white" md-limit="query.limit" md-limit-options="[5, 10, 15]" md-page="query.page" md-total="{{$parent.servers.length}}"  md-page-select></md-table-pagination>

     </md-card-content>

Answer 1

In the ng-repeat you are first using orderBy to sort, then limitTo to get one page, then filter to search within that page by the search phrase:

ng-repeat="s in $parent.servers | orderBy: query.serverOrder | limitTo: query.limit : (query.page -1) * query.limit | filter :searchPhrase"

Instead you should first apply filter (to search against the whole data), then orderBy (so you only need to sort the relevant data), then finally limitTo (to get one page of the sorted, filtered results):

ng-repeat="s in $parent.servers | filter :searchPhrase | orderBy: query.serverOrder | limitTo: query.limit : (query.page -1) * query.limit"