ng-grid tests

This is a complete package with jQuery, jQueryUI, AngularJS and twitterBootstrap and ng-grid

by vinodlouis

HTML

<script src="http://code.angularjs.org/1.1.0/angular.js"></script>
<script src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
<link rel="stylesheet" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css">
<div ng-app="myapp">
    <div ng-controller="myctrl">
      <div ng-grid="options" class="grid"></div>
    </div>
</div>

CSS

.grid {
  height: 250px;
}

JavaScript

var myapp = angular.module('myapp', ["ui", "ngGrid"]);

myapp.controller('myctrl', function($scope, $http) {

    var myData1 = [{name: "Moroni", age: 50, role:"Teacher"},
                     {name: "Tiancum", age: 43,role:"Teacher"},
                     {name: "Abe", age: 27,role:"Teacher"},
                     {name: "Amy", age: 29,role:"Student"},
                     {name: "Jacob", age: 27,role:"Student"}];
    
    var myData2 = [{name: "Moroni1", age: 50, role:"Teacher"},
                     {name: "Tiancum1", age: 43,role:"Teacher"},
                     {name: "Abe1", age: 27,role:"Teacher"},
                     {name: "Amy1", age: 29,role:"Student"},
                     {name: "Jacob1", age: 27,role:"Student"}];
    
  $scope.gridData = myData1;
     var myHeaderCellTemplate = '<div class="ngHeaderSortColumn {{col.headerClass}}" ng-style="{cursor: col.cursor}" ng-class="{ ngSorted: !noSortVisible }">'+
        '<div ng-click="sortByMyPreference()" ng-class="\'colt\' + col.index" class="ngHeaderText">{{col.displayName}}</div>'+
        '<div class="ngSortButtonDown" ng-show="ID.down"></div>'+
        '<div class="ngSortButtonUp" ng-show="ID.up"></div>'+
        '<div class="ngSortPriority">{{col.sortPriority}}</div>'+
        '<div ng-show="col.resizable" class="ngHeaderGrip" ng-click="col.gripClick($event)" ng-mousedown="col.gripOnMouseDown($event)"></div>';
  
  $scope.sortByMyPreference = function(){
    //alert("here your logic")
    //here sort the $scope.gridData Object As you want
    console.log($scope.gridData);
    myData2 = myData1.reverse();
    console.log(myData2);
    $scope.gridData = myData2;
    console.log($scope.gridData);
  };
  
  
    $scope.options = { 
      data: 'gridData',
      columnDefs: [{field: 'name', displayName: 'Name',headerCellTemplate: myHeaderCellTemplate,},
                    {field:'age', displayName:'Age'},
                    {field:'role', displayName:'Role'},]
    };
  
  
  
});