The following controller shows that logic for a working ng-grid.
app.controller('DocumentController',function($scope,DocumentService) {
$scope.filterOptions = {
filterText: '',
useExternalFilter: false
};
$scope.totalServerItems =0;
$scope.pagingOptions ={
pageSizes: [5,10,100],
pageSize: 5,
currentPage: 1
}
//filter!
$scope.dropdownOptions = [{
name: 'Show all'
},{
name: 'Show active'
},{
name: 'Show trash'
}];
//default choice for filtering is 'show active'
$scope.selectedFilterOption = $scope.dropdownOptions[1];
//three stage bool filter
$scope.customFilter = function(data){
var tempData = [];
angular.forEach(data,function(item){
if($scope.selectedFilterOption.name === 'Show all'){
tempData.push(item);
}
else if($scope.selectedFilterOption.name ==='Show active' &&
!item.markedForDelete){
tempData.push(item);
}
else if($scope.selectedFilterOption.name ==='Show trash' &&
item.markedForDelete){
tempData.push(item);
}
});
return tempData;
}
//grabbing data
$scope.getPagedDataAsync = function(pageSize, page, searchText){
var data;
if(searchText){
var ft = searchText.toLowerCase();
DocumentService.get('filterableData.json').success(function(largeLoad){
//filter the data when searching
data =
$scope.customFilter(largeLoad).filter(function(item){
return
JSON.stringify(item).toLowerCase().indexOf(ft) != -1;
})
$scope.setPagingData($scope.customFilter(data),page,pageSize);
})
}
else{
DocumentService.get('filterableData.json').success(function(largeLoad){
var testLargeLoad = $scope.customFilter(largeLoad);
//filter the data on initial page load when no search
text has been entered
$scope.setPagingData(testLargeLoad,page,pageSize);
})
}
};
//paging
$scope.setPagingData = function(data, page, pageSize){
var pagedData = data.slice((page -1) * pageSize, page * pageSize);
//filter the data for paging
$scope.myData = $scope.customFilter(pagedData);
$scope.myData = pagedData;
$scope.totalServerItems = data.length;
if(!$scope.$$phase){
$scope.$apply();
}
}
//watch for filter option change, set the data property of gridOptions
to the newly filtered data
$scope.$watch('selectedFilterOption',function(){
var data = $scope.customFilter($scope.myData);
$scope.myData = data;
$scope.getPagedDataAsync($scope.pagingOptions.pageSize,
$scope.pagingOptions.currentPage);
$scope.setPagingData($scope.myData,$scope.pagingOptions.currentPage,$scope.pagingOptions.pageSize);
})
$scope.$watch('pagingOptions',function(newVal, oldVal){
$scope.getPagedDataAsync($scope.pagingOptions.pageSize,$scope.pagingOptions.currentPage,$scope.filterOptions.filterText);
$scope.setPagingData($scope.myData,$scope.pagingOptions.currentPage,$scope.pagingOptions.pageSize);
},true)
$scope.message ="This is a message";
$scope.gridOptions = {
data: 'myData',
enablePaging: true,
showFooter:true,
totalServerItems: 'totalServerItems',
pagingOptions: $scope.pagingOptions,
filterOptions: $scope.filterOptions,
enableCellEdit: true,
enableColumnReordering: true,
enablePinning: true,
showGroupPanel: true,
groupsCollapsedByDefault: true,
enableColumnResize: true
}
//get the data on page load
$scope.getPagedDataAsync($scope.pagingOptions.pageSize,
$scope.pagingOptions.currentPage);
});
this works and pages correctly, but this means that on every controller
that I wanted to use a grid I would have to re-do all those paging
functions.
So then I thought about pulling out all of that grid-specific code into
it's own class.
var NgGrid = (function(){
function NgGrid(gridOptions){
this.service = gridOptions.service;
this.filterOptions = gridOptions.filterOptions;
this.pagingOptions = gridOptions.pagingOptions;
this.dropdownOptions = gridOptions.dropdownOptions;
this.selectedFilterOption = this.dropdownOptions[1];
this.totalServerItems = 0;
this.myData = [];
this.customFilter = function(data,propName){
var tempData =[];
angular.forEach(data,function(item){
if(this.selectedFilterOption.name === 'Show all'){
tempData.push(item);
}
else if(this.selectedFilterOption.name === 'Show active' &&
!item[propName]){
tempData.push(item);
}
else if(this.selectedFilterOption.name === 'Show trash' &&
item[propName]){
tempData.push(item);
}
})
}
this.getPagedDataAsync = function(pageSize, page, searchText){
var data;
if(searchText){
var ft = searchText.toLowerCase();
//filter the data when searching
this.service.get('filterableData.json').success(function(data){
data = this.customFilter(data).filter(function (item) {
return
JSON.stringify(item).toLowerCase().indexOf(ft) != -1;
});
this.setPagingData(this.customFilter(data),page,pageSize);
})
}
else{
this.service.get('filterableDat.json').success(function(largeLoad){
var filtered = this.customFilter(largeLoad);
this.setPagingData(filtered,page, pageSize);
})
}
}
this.setPagingData = function(data, page, pageSize){
var pagedData = data.slice((page-1) * pageSize, page *
pageSize);
this.myData = this.customFilter(pagedData);
this.myData = pagedData;
this.totalServerItems = data.length;
if($scope.$$phase){
$scope.apply();
}
}
}
return NgGrid;
});
I reckoned that most of the things that I added to the scope like
filterOptions and dropdownOptions could have default values in the
constructor of the NgGrid object and perhaps be overwritten in the
controller itself. What I'm not sure about is
this.setPagingData = function(data, page, pageSize){
var pagedData = data.slice((page-1) * pageSize, page *
pageSize);
this.myData = this.customFilter(pagedData);
this.myData = pagedData;
this.totalServerItems = data.length;
//right here it gets fuzzy, not even totally sure why it works
if($scope.$$phase){
$scope.apply();
}
}
from the DocumentController.js file I put many options related to the grid
on its scope, so when I created my NgGrid "class" I switched out $scope for
this. But with this part,
I have no idea what I should do. Should I pass in a controller to the
constructor of NgGrid as well? Could I access the $scope of a controller
that way?
Or, if I am only planning on using this object inside of a controller,
should I say screw it, I know that there will be a $scope and $$phase
available and leave my class the way it is?
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
