导入JSON数据后的Angular js动态网格标题

时间:2015-04-26 10:01:29

标签: javascript angularjs angularjs-scope ng-grid

从以下代码中,我将获得包含名称,性别和公司列的网格。

现在我将如何动态更改网格列名称:就像我想要 FirstName 而不是名称

 <!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>

支持这是json文件

[{
  "Name":"John Smith",
  "Gender":"male",
  "Company":"TestIcon"
 },
 {
  "Name":"Jane Doe",
  "Gender":"female",
  "Company":"FastTruck"
 }]

从以下代码中,我将获得列名称,性别和公司的网格。

现在我将如何动态更改网格列名称:就像我想要 FirstName 而不是名称

伙计们请帮我分类一下?

1 个答案:

答案 0 :(得分:0)

我想你想要:

columnDefs: [
   { field: 'Name', displayName: 'FirstName' },
   { field: 'Gender' },
   { field: 'Company' }
]