Web Programming examples

Google Maps,AngularJS

AngularJS ng-grid change header style

  • AngularJS : 1.2.23
  • Bootstrap : 3.2.0
  • ng-grid : 2.0.13
  • include file
  • ng-grid.min.css,jquery.js,angular.min.js,ng-grid.min.js,ui-bootstrap-tpls-0.11.0.min.js
<link href="http://www.example.com/wp/wp-content/themes/ang/css/ng-grid.min.css" rel="stylesheet">
<link href="http://www.example.com/wp/wp-content/themes/ang/css/grid1.css" rel="stylesheet">
<script type='text/javascript' src='http://www.example.com/wp/wp-content/themes/ang/js/ng-grid.min.js'></script>
<script type='text/javascript' src='http://www.example.com/wp/wp-content/themes/ang/js/grid1.js'></script>
<div ng-controller="MyCtrl">
  <div class="row">
    <div class="col-sm-12">
      <div class="gridStyle" ng-grid="gridOptions">
      </div>
    </div>
  </div>
</div>
var myApp = angular.module('googleMapApp', ['ui.bootstrap','ngGrid']);

myApp.controller('MyCtrl', function($scope) {
    $scope.myData = [
      {name: "product-A", day: "2014/08/12", count: 50},
      {name: "product-B", day: "2014/08/12", count: 43},
      {name: "product-A", day: "2014/09/11", count: 27},
      {name: "product-B", day: "2014/07/23", count: 29},
      {name: "product-F", day: "2014/09/11", count: 27}
    ];

    $scope.gridOptions = {
      data: 'myData',
      columnDefs: [
        {field: 'day', displayName: 'day (update)'},
        {field: 'name', displayName: 'name (update)'},
        {field: 'count', displayName: 'count (update)'}
      ],
      headerRowHeight: 64
    };
});
.gridStyle {
    border: 1px solid rgb(212,212,212);
    height: 300px;
    width: 300px;
}

.ngHeaderText {
  white-space: normal !important;
}