ngGrid 체크박스 추가 예제

by Jaeha Ahn

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ng-grid/2.0.7/ng-grid.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/ng-grid/2.0.7/ng-grid.min.css">
<div ng-app="myApp">
    <div ng-controller="myController">
        <div class="gridStyle" ng-grid="gridOptions"></div>

    </div>
</div>

CSS

.gridStyle {
    border: 1px solid rgb(212,212,212);
    width: 600px; 
    height: 250px;
    font: 12px Tahoma;
    color: #777;
}

JavaScript

(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" >'}
            ]
        };
 
    });    
})();