egovGrid 기본 설정 예제　

by Jeado

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script src="http://egov.angularjs.or.kr/build/eGovNg.js"></script>
<link rel="stylesheet" href="http://egov.angularjs.or.kr/build/css/eGovNg.css">
<div ng-app="myApp" ng-controller="myController">
    <div egov-grid name="demoGrid" dataset="userList">
        <table>
            <thead>
                <tr>
                    <th>이름</th>
                    <th>이메일</th>
                    <th>등록일</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>{{name}}</td>
                    <td>{{email}}</td>
                    <td>{{regDate}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

CSS

.eGovGrid-container {
    height: 300px;
}

JavaScript

//'ngGrid' 모듈을 인젝션
angular.module('myApp', ['egov.ui'])
    .controller('myController', function ($scope) {
    //그리드 데이터
    $scope.userList = [{
        id: "haibane",
        name: "재도",
        email: "[email protected]",
        regDate: "20130910"
    }, {
        id: "jeaha",
        name: "재하",
        email: "[email protected]",
        regDate: "20130910"
    }, {
        id: "jisu",
        name: "지수",
        email: "[email protected]",
        regDate: "20130910"
    }, {
        id: "hanhang",
        name: "한행",
        email: "[email protected]",
        regDate: "20130910"
    }];
});