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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了角度表中的过滤仅适用于当前页面相关的知识,希望对你有一定的参考价值。

我正在使用Angular应用页面来过滤带分页的表,但搜索文本只过滤当前页面的记录。

要求是不仅过滤当前页面的整个数据集。有没有办法让它发挥作用?谢谢。

这是我的控制器脚本

//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();
}])

和我在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>
答案

ng-repeat中,您首先使用orderBy进行排序,然后limitTo获取一页,然后filter通过搜索短语在该页面内搜索:

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

相反,你应该首先应用filter(搜索整个数据),然后orderBy(所以你只需要对相关数据进行排序),然后最后limitTo(获得一页已排序,过滤的结果):

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

以上是关于角度表中的过滤仅适用于当前页面的主要内容,如果未能解决你的问题,请参考以下文章

复选框仅适用于 jQuery 数据表中的当前分页页面

选项卡内的 EXTJS 网格 - 过滤器仅适用于页面刷新

仅适用于某些路线的角度通用渲染

带有选中复选框的分页。复选框仅适用于当前分页页面。 jQuery 数据表

单元格格式仅适用于可见(未过滤)行

我的(Vba)代码仅适用于列表中的1个变量,并且在列表框中使用多个变量时仅返回空白