角度表中的过滤仅适用于当前页面
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"
以上是关于角度表中的过滤仅适用于当前页面的主要内容，如果未能解决你的问题，请参考以下文章