AngularJS2015. 12. 3. 17:29
반응형


angular.min.js


jquery.min.js


ng-grid.min.css


ng-grid.min.js




<!doctype html>

<html>

<head>

<title>Hello AngularJS</title>

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">

<link href="../css/ng-grid.min.css" rel="stylesheet">

<style type="text/css">

.gridStyle {

border: 1px solid rgb(212, 212, 212);

width: 100%;

height: 700px;

font: 12px Tahoma;

color: #777;

}

</style>

</head>

<body>

<div ng-app="app01">

<div ng-controller='appctrl01'>

<div class="gridStyle" ng-grid="gridOptions"></div>

</div>

</div>

<!-- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script> -->

<script src="../js/jquery.min.js"></script>

<script src="../js/angular.min.js"></script>

<script src="../js/ng-grid.min.js"></script>

<script src="../js/ui-grid.js"></script>

<script type="text/javascript">

var newsModule = angular.module('app01', [ 'ngGrid' ]);

newsModule.controller('appctrl01', fnNewsCtrl);

function fnNewsCtrl($scope, $http) {

$http.get('https://api.getevents.co/event?&lat=41.904196&lng=12.465974').success(

function(data)

{

$scope.successData = data.events;


});

$scope.gridOptions = {

data : 'successData',

enableCellSelection : false,

enableRowSelection : false,

enableCellEdit : false,

columnDefs : [

             {field : 'id',displayName : 'id',enableCellEdit : true},

             {field : 'name',displayName : 'name',enableCellEdit : true},

             {field : 'city_meta.area',displayName : 'city_meta.area',enableCellEdit : true},

             {field : 'city_meta.area_code',displayName : 'city_meta.area_code',enableCellEdit : true},

             {field : 'source_name',displayName : 'source_name',enableCellEdit : true},

             {field : 'image_large_url',displayName : 'image_large_url',enableCellEdit : true},

             {field :'image_large_url', displayName:'image_large_url', cellTemplate: '<img ng-src="{{row.getProperty(\'image_large_url\')}}"></img>'}

]

};

}

</script>

</body>

</html>





Posted by 1010