ng-grid tests

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

by vinodlouis

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://code.angularjs.org/1.1.0/angular.js"></script>
<script src="https://raw.github.com/angular-ui/angular-ui/master/build/angular-ui.js"></script>
<link rel="stylesheet" href="https://raw.github.com/angular-ui/angular-ui/master/build/angular-ui.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.22/themes/base/jquery-ui.css">
<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">
      
      <a class="btn" ng-click="getData()">Get data!</a>
        <a class="btn" ng-click="getNext()">next</a>
        <a class="btn" ng-click="getPrev()">prev</a>
      <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) {

    $scope.testInfo= "TestInfo";
    var start = 0;
    var end = 2;
    
  var myData = [
          {id:1, name:"Max", number:51323.512, age: 23},
          {id:2, name:"Adam", number:7245.2, age:1},
          {id:3, name:"Betty", number:828, age:33},
          {id:4, name:"Sara", number:23452.45182, age:44}
          ];
    
    var myCols = [
        {field:"id", displayName:"ID"},
        {field:"name", displayName:"Name"},
        {field:"number", displayName:"Number", cellFilter:"number:2"},
        {field:"age", displayName:"Age"}        
        ];
    
    $scope.getData = function() {
        $scope.defs = myCols.slice(start, end);
        $scope.data = myData;
    };
    
    $scope.getNext = function() {
        start = 2;
        end = 4;
        $scope.getData();
    };
    
    $scope.getPrev = function() {
        start = 0;
        end = 2;
        $scope.getData();
    };

  $scope.options = {
      data: "data",
      columnDefs:'defs'
  };
  
  
  
});