angularjs - Nothing is shown in table using ng-grid -
code ng-grid:
var app = angular.module('myapp', []); app.controller('myctrl', function($scope) { $scope.mydata=[]; $scope.queryresponse =[{ name: "name1", city:"city1" }, { name: "name2", city:"city2" }, { name: "name3", city:"city3" }, { name: "name4", city:"city4" }, { name: "name5", city:"city5" }, { name: "name6", city:"city6" }, { name: "name7", city:"city7" } ]; $scope.coldefs = [{ field: "name" }, { field: "city" }]; $scope.filteroptions = { filtertext: "" }; $scope.pagingoptions = { pagesizes: [5, 10, 25], pagesize: 5, totalserveritems: 0, currentpage: 1 }; $scope.setpagingdata = function(data, page, pagesize) { var pageddata = data.slice((page - 1) * pagesize, page * pagesize); $scope.mydata = pageddata; $scope.pagingoptions.totalserveritems = data.length; if (!$scope.$$phase) { $scope.$apply(); } }; $scope.getpageddataasync = function(pagesize, page) { settimeout(function() { $scope.setpagingdata($scope.queryresponse, page, pagesize); }, 100); }; $scope.$watch('pagingoptions', function() { $scope.getpageddataasync($scope.pagingoptions.pagesize, $scope.pagingoptions.currentpage, $scope.filteroptions.filtertext); }, true); $scope.gridoptions = { data: 'mydata', columndefs: 'coldefs', enablepaging: true, pagingoptions: $scope.pagingoptions, showfooter: true }; }); html:
<div ng-app="myapp" ng-controller="myctrl"> <div class="gridstyle" ng-grid="gridoptions"></div> </div> total items : 7
is shown in footer.but nothing shown in table. advice..
here few issues may have prevented seeing on page.
in html, 'ng-grid' used instead of 'ui-grid' (this link posted). there syntax error specified controller (myctrl instead of myctrl).
in javascript: 'ui.grid' not included dependency , $scope.coldefs throws error inside of gridoptions. i've included working version below.
html:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>document</title> <link href="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.css" /> </head> <body> <div ng-app="myapp" ng-controller="myctrl"> <div class="gridstyle" ui-grid="gridoptions"></div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.min.js"></script> <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.js"></script> <script src="./app.js"></script> </body> </html> javascript (app.js):
var app = angular.module('myapp', ['ui.grid']); // ui.grid included app.controller('myctrl', function($scope) { $scope.mydata=[]; var queryresponse =[ {name: "name1", city:"city1"}, {name: "name2", city:"city2"}, {name: "name3", city:"city3"}, {name: "name4", city:"city4"}, {name: "name5", city:"city5"}, {name: "name6", city:"city6"}, {name: "name7", city:"city7"} ]; // $scope.coldefs // error occured (angular didn't coldefs on $scope) var coldefs = [ {field: "name", width: 80}, {field: "city"} ]; // $scope var filteroptions = { filtertext: "" }; $scope.pagingoptions = { pagesizes: [5, 10, 25], pagesize: 5, totalserveritems: 0, currentpage: 1 }; var setpagingdata = function(data, page, pagesize) { var pageddata = data.slice((page - 1) * pagesize, page * pagesize); $scope.mydata = pageddata; $scope.pagingoptions.totalserveritems = data.length; if (!$scope.$$phase) { $scope.$apply(); } }; var getpageddataasync = function(pagesize, page) { settimeout(function() { setpagingdata(queryresponse, page, pagesize); }, 100); }; $scope.$watch('pagingoptions', function() { getpageddataasync($scope.pagingoptions.pagesize, $scope.pagingoptions.currentpage); }, true); $scope.gridoptions = { data: 'mydata', columndefs: coldefs, enablepaging: true, filteroptions: filteroptions, pagingoptions: 'pagingoptions', showfooter: true }; });
Comments
Post a Comment