angular.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>
