<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap@*" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
<link href="style.css" rel="stylesheet" />
<script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script data-require="bootstrap@*" data-semver="3.2.0" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.js"></script>
<link href="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.css" rel="stylesheet" />
<script src="script.js"></script>
</head>
<body>
<h3>Angular UI Grid</h3>
<div class="container">
<br>
<div ng-app="myApp" ng-controller="ctrl">
<div ui-grid="myData" class="uiGridTable"></div>
</div>
</div>
</body>
</html>
// Code goes here
// Code goes here
var app = angular.module("myApp", ['ui.grid']);
function ctrl($scope) {
$scope.myData = {
data: "listing",
columnDefs: [{
field: "id",
displayName: "ID"
}, {
field: "name",
displayName: "Name"
}, {
field: "firstname",
displayName: "First Name"
}, {
field: "contacts",
displayName: "Contacts",
cellTemplate: "<div class='ui-grid-cell-contents'><div ng-repeat='field in COL_FIELD'>{{field.id}} - {{field.type}}- {{field.value}}</div></div>"
}, ],
rowHeight: 100
}
$scope.listing = [{
"id": "0",
"name": "My name",
"firstname": "My first Name",
"contacts": [{
"id": "0",
"type": "phone",
"value": "0574869345"
}, {
"id": "1",
"type": "email",
"value": "myEmail@mail.com"
}]
}, {
"id": "1",
"name": "My name One",
"firstname": "My first Name One",
"contacts": [{
"id": "2",
"type": "phone",
"value": "0574444444"
}, {
"id": "3",
"type": "email",
"value": "myEmailOne@mail.com"
}]
}];
$scope.count = 0;
}
/* Styles go here */
.uiGridTable: {
height: 600px;
}