Web Programming examples

Google Maps,AngularJS

AngularJS ng-grid multiple column spanning for headers

  • 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 category-header="gridOptions"></div>
      <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", avg1: 10.5, count1: 50, avg2: 28.3, count2: 24},
      {name: "product-b", avg1: 13.5, count1: 33, avg2: 14.3, count2: 54},
      {name: "product-c", avg1: 50.5, count1: 10, avg2: 64.3, count2: 91},
      {name: "product-d", avg1: 56.1, count1: 60, avg2: 18.3, count2: 35},
      {name: "product-e", avg1: 17.5, count1: 56, avg2: 68.3, count2: 13}
    ];
    $scope.gridOptions = {
      data: 'myData',
      columnDefs: [
        {field: 'name', displayName: 'Name'},
        {field: 'avg1', displayName: 'Avg', categoryDisplayName: '2013'},
        {field: 'count1', displayName:'Count', categoryDisplayName: '2013'},
        {field: 'avg2', displayName: 'Avg', categoryDisplayName: '2014'},
        {field: 'count2', displayName:'Count', categoryDisplayName: '2014'}
      ]
    };
});

myApp.directive('categoryHeader', function() {
  function link(scope, element, attrs) {
    :
    :
    see 
      "https://github.com/angular-ui/ng-grid/issues/644"
      "http://plnkr.co/edit/hRYMM03y0cOMFxcgG6dR"
    :
    :
    createCategories(null, scope.categoryHeader.$gridScope.columns);
  }
  return {
    scope: {
      categoryHeader: '='
    },
    restrict: 'EA',
    templateUrl: '../wp-content/themes/ang/assets/templates/category_header.html
',
    link: link
  };
});