(function(){ //'ngGrid' 모듈을 인젝션 var myApp = angular.module('myApp', ['ngGrid']); myApp.controller('myController', function($scope){ //그리드 데이터 $scope.myData = [ {name: "John", age: 50, location: 'NY', check:false}, {name: "Paul", age: 20, location: 'NY', check:false}, {name: "Jessy", age: 30, location: 'LA', check:false}, {name: "Nick", age: 40, location: 'LA', check:false}, {name: "Joy", age: 52, location: 'NY', check:false}, {name: "Johney", age: 20, location: 'NY', check:false}, {name: "Kim", age: 53, location: 'LA', check:false}, {name: "Son", age: 33, location: 'AR', check:false}, {name: "Philip", age: 15, location: 'AR', check:false}, {name: "Mike", age: 59, location: 'AR', check:false}, {name: "Evans", age: 51, location: 'NY', check:false}, {name: "Bob", age: 50, location: 'LA', check:false} ]; //그리드 옵션 $scope.gridOptions = { data: 'myData', enableCellSelection: false, enableRowSelection: false, enableCellEdit: false, columnDefs: [ {field: 'name', displayName: 'Name', enableCellEdit: true}, {field:'age', displayName:'Age', enableCellEdit: true}, {field: 'location', displayName: 'Location', enableCellEdit: false}, {field:'check', displayName:'Check', cellTemplate: '<input type="checkbox" ng-model="row.entity.check" >'} ] }; }); })();
<div ng-app="myApp"> <div ng-controller="myController"> <div class="gridStyle" ng-grid="gridOptions"></div> </div> </div>
.gridStyle { border: 1px solid rgb(212,212,212); width: 600px; height: 250px; font: 12px Tahoma; color: #777; }