var app = angular.module('app', ['ui.grid', 'ui.bootstrap']);
app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.gridOptions = {
columnDefs: [
{ name: 'name', cellTemplate: 'nameTemplate.html' },
{ name: 'balance' },
{ name: 'city', cellTemplate: 'cityTemplate.html' }
]
};
$http.get('data.json')
.success(function (data) {
$scope.gridOptions.data = data;
});
}])
;
body {
padding: 5px;
}
.grid {
width: 100%;
height: 250px;
}
.grid-tooltip {
overflow: visible;
z-index: 9999999;
float: left;
}
<!DOCTYPE html>
<html ng-app="app">
<head>
<link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
<script data-require="ui-bootstrap@0.12.1" data-semver="0.12.1" src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.min.js"></script>
<script src="//cdn.rawgit.com/angular-ui/bower-ui-grid/v3.0.6/ui-grid.min.js"></script>
<link rel="stylesheet" href="//cdn.rawgit.com/angular-ui/bower-ui-grid/v3.0.6/ui-grid.min.css" type="text/css" />
<link rel="stylesheet" href="main.css" type="text/css" />
</head>
<body>
<div ng-controller="MainCtrl">
<div id="grid1" ui-grid="gridOptions" class="grid"></div>
</div>
<script src="app.js"></script>
</body>
</html>
[
{
"name": "Bishop",
"email": "bishopwilkerson@netility.com",
"balance": 95.26,
"city": "Freeburn",
"state": "Texas"
},
{
"name": "Trevino",
"email": "trevinowilkerson@netility.com",
"balance": 353.84,
"city": "Nicut",
"state": "Pennsylvania"
},
{
"name": "Kerry",
"email": "kerrywilkerson@netility.com",
"balance": 630.97,
"city": "Frystown",
"state": "Indiana"
},
{
"name": "Gretchen",
"email": "gretchenwilkerson@netility.com",
"balance": 671.64,
"city": "Rodman",
"state": "District Of Columbia"
},
{
"name": "Reilly",
"email": "reillywilkerson@netility.com",
"balance": 710.15,
"city": "Summerset",
"state": "Minnesota"
},
{
"name": "Osborn",
"email": "osbornwilkerson@netility.com",
"balance": 423.11,
"city": "Brewster",
"state": "Montana"
},
{
"name": "Sheryl",
"email": "sherylwilkerson@netility.com",
"balance": 591.39,
"city": "Saddlebrooke",
"state": "Oklahoma"
},
{
"name": "Nguyen",
"email": "nguyenwilkerson@netility.com",
"balance": 884.9,
"city": "Delco",
"state": "Tennessee"
},
{
"name": "Berry",
"email": "berrywilkerson@netility.com",
"balance": 772.21,
"city": "Fontanelle",
"state": "Ohio"
},
{
"name": "Webb",
"email": "webbwilkerson@netility.com",
"balance": 743.96,
"city": "Catharine",
"state": "Massachusetts"
},
{
"name": "Vasquez",
"email": "vasquezwilkerson@netility.com",
"balance": 150.21,
"city": "Gallina",
"state": "Utah"
},
{
"name": "Mildred",
"email": "mildredwilkerson@netility.com",
"balance": 894.48,
"city": "Brutus",
"state": "Nevada"
},
{
"name": "Kristine",
"email": "kristinewilkerson@netility.com",
"balance": 843.49,
"city": "Bodega",
"state": "Louisiana"
},
{
"name": "Ilene",
"email": "ilenewilkerson@netility.com",
"balance": 161.47,
"city": "Beason",
"state": "Northern Mariana Islands"
},
{
"name": "Deana",
"email": "deanawilkerson@netility.com",
"balance": 871.33,
"city": "Loretto",
"state": "Virgin Islands"
},
{
"name": "James",
"email": "jameswilkerson@netility.com",
"balance": 844.93,
"city": "Tilden",
"state": "Delaware"
},
{
"name": "Brittany",
"email": "brittanywilkerson@netility.com",
"balance": 626.98,
"city": "Geyserville",
"state": "South Carolina"
},
{
"name": "Leona",
"email": "leonawilkerson@netility.com",
"balance": 283.11,
"city": "Datil",
"state": "Kentucky"
},
{
"name": "Pace",
"email": "pacewilkerson@netility.com",
"balance": 649.4,
"city": "Fresno",
"state": "Alaska"
},
{
"name": "Alexis",
"email": "alexiswilkerson@netility.com",
"balance": 812.77,
"city": "Hannasville",
"state": "Vermont"
},
{
"name": "Christi",
"email": "christiwilkerson@netility.com",
"balance": 156.4,
"city": "Basye",
"state": "Maryland"
},
{
"name": "Mejia",
"email": "mejiawilkerson@netility.com",
"balance": 639.48,
"city": "Singer",
"state": "Florida"
},
{
"name": "Nash",
"email": "nashwilkerson@netility.com",
"balance": 142.35,
"city": "Bergoo",
"state": "New York"
},
{
"name": "Amber",
"email": "amberwilkerson@netility.com",
"balance": 635.42,
"city": "Kaka",
"state": "Wyoming"
},
{
"name": "Fuentes",
"email": "fuenteswilkerson@netility.com",
"balance": 224.88,
"city": "Finzel",
"state": "New Hampshire"
},
{
"name": "Dale",
"email": "dalewilkerson@netility.com",
"balance": 468.08,
"city": "Fillmore",
"state": "Marshall Islands"
},
{
"name": "Yesenia",
"email": "yeseniawilkerson@netility.com",
"balance": 343.73,
"city": "Marshall",
"state": "Nebraska"
},
{
"name": "Ortiz",
"email": "ortizwilkerson@netility.com",
"balance": 470.11,
"city": "Advance",
"state": "California"
},
{
"name": "Olsen",
"email": "olsenwilkerson@netility.com",
"balance": 304.92,
"city": "Blairstown",
"state": "Hawaii"
},
{
"name": "Sybil",
"email": "sybilwilkerson@netility.com",
"balance": 848.55,
"city": "Juarez",
"state": "South Dakota"
},
{
"name": "Robles",
"email": "robleswilkerson@netility.com",
"balance": 602.39,
"city": "Salunga",
"state": "New Mexico"
}
]
<div class="grid-tooltip" tooltip="{{ row.entity.email }}" tooltip-placement="right">
<div class="ui-grid-cell-contents">
{{ COL_FIELD }}
</div>
</div>
<div class="grid-tooltip" tooltip="{{ row.entity.state }}" tooltip-placement="top" tooltip-append-to-body="true">
<div class="ui-grid-cell-contents">
{{ COL_FIELD }}
</div>
</div>