ng-grid checkbox template

by hopest

HTML

<link rel="stylesheet" href="http://twitter.github.io/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.io/ng-grid/lib/ng-grid.debug.js"></script>
<link rel="stylesheet" href="http://angular-ui.github.io/ng-grid/css/ng-grid.css">
<div ng-app="myapp">
    <div ng-controller="myctrl">
      
      <a class="btn" ng-click="data.load()">Get data!</a>
      <div ng-grid="grid.options" class="grid"></div>
      <ul ng-repeat="item in data.selected">
        <li>{{item}}</li>
      </ul>
    </div>
</div>

CSS

.grid {
  height: 250px;
}

JavaScript

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

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

    $scope.testInfo= "TestInfo";
  
  $scope.data = {
    persons: [],
    selected:[],
    load: function () {
      $http.get("/echo/json/").success(function(data) {
      $scope.data.persons = [
          {id:1, name:"Max", number:51323.512,value:'on'},
            {id:2, name:"Adam", number:7245.2,value:'on'},
            {id:3, name:"Betty", number:828,value:'off'},
            {id:4, name:"Sara", number:23452.45182,value:'on'}
          ];
        
        $scope.data.selected[0] = $scope.data.persons[0];
        
      });
    }
  };

   var cellTemplate = "<div ng-class=\"'ngCellText colt' + $index\">"
					+ "	<span ng-cell-text>{{COL_FIELD}}</span>"
					+ "</div>";
    var cellEditTemplate = '<input type="checkbox" ng-checked="row.entity.value==\'on\'" ng-input="COL_FIELD" /></div>';
    
  $scope.grid = {
    options: {
      data: "data.persons",
      selectedItems: $scope.data.selected,
      multiSelect: false,
      columnDefs: [
        {field:"id", displayName:"ID"},
        {field:"name", displayName:"Name"},
        {field:"number", displayName:"Nummer", cellFilter:"number:2"},
          {field: "value",displayName:"Value",enableCellEdit : true,cellTemplate : cellTemplate,
          editableCellTemplate : cellEditTemplate}
        
        ]
    }
  };
  
  
  
});