2013-04-29 74 views
7

我是ng-grid新手。我正在学习带编辑模板选项的ng-grid。我已经创建了具有编辑复选框选项的网格。但是我不知道如何在编辑复选框后在该网格中获取值?谢谢。如何在ng-grid中设置复选框单元格编辑模板?

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

     ] 
    } 
    }; 



}); 

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

回答

12

你现在可能已经想通了这一点,但一个可能的选择是使用NG-电网建设复选框选择。它没有显示在主页上的示例中,但在API中作为选项列出。

showSelectionCheckbox: true 
+0

感谢Ty Danielson。 – user007 2013-12-27 11:17:00