javascript - Angular js dynamic grid headers after importing JSON data -
from following code, the grid having columns name, gender , company.
now how dynamically change grid column names : want firstname instead of name
<!doctype html> <html ng-app="app"> <head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-touch.js"> </script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-animate.js"> </script> <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script> <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script> <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"> </script> <script src="/release/ui-grid-unstable.js"></script> <script src="/release/ui-grid-unstable.css"></script> <script> var app = angular.module('app', ['nganimate', 'ngtouch', 'ui.grid', 'ui.grid.importer']); app.controller('mainctrl', ['$scope', '$http', '$interval', function ($scope, $http, $interval) { $scope.data = []; $scope.gridoptions = { enablegridmenu: true, data: 'data', importerdataaddcallback: function ( grid, newobjects ) { $scope.data = $scope.data.concat( newobjects ); }, onregisterapi: function(gridapi){ $scope.gridapi = gridapi; } }; }]); </script> </head> <body> <div ng-controller="mainctrl"> <div ui-grid="gridoptions" ui-grid-importer class="grid"></div> </div> </body> </html> suppoese json file
[{ "name":"john smith", "gender":"male", "company":"testicon" }, { "name":"jane doe", "gender":"female", "company":"fasttruck" }] from following code, the grid having columns name, gender , company.
now how dynamically change grid column names : want firstname instead of name
guys please me in sorting this?
i guess want:
columndefs: [ { field: 'name', displayname: 'firstname' }, { field: 'gender' }, { field: 'company' } ]
Comments
Post a Comment