angularjs – 如何在ng-grid中制作复选框单元格编辑模板？

这里JSfiddle.

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,{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}

        ]
    }
  };



});

<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>