2013-04-29 51 views
7

Tôi mới sử dụng lưới ng. Tôi đang học ng lưới với tùy chọn chỉnh sửa mẫu. tôi đã tạo lưới với các tùy chọn hộp kiểm chỉnh sửa.Nhưng tôi không biết Làm thế nào để có được giá trị trong lưới đó sau khi chỉnh sửa hộp kiểm? Cảm ơn bạn.Làm thế nào để tạo mẫu ô chỉnh sửa hộp kiểm trong ng-lưới?

Đây 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> 

Trả lời

12

Có thể bạn đã tìm ra điều này ngay bây giờ, nhưng một tùy chọn có thể là sử dụng ng-lưới xây dựng trong bộ chọn hộp kiểm. Nó không được hiển thị trong các ví dụ trên trang chính của họ, nhưng được liệt kê dưới dạng một tùy chọn trong API.

showSelectionCheckbox: true 
+0

Cảm ơn Ty Danielson. – user007

Các vấn đề liên quan