<html>
<head>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css">
<style type="text/css">
.gridHeight {
height: 30px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script src="http://ui-grid.info/release/ui-grid-unstable.js"></script>
<script>
var app = angular.module('uigridApp', ['ui.grid', 'ui.grid.selection', 'ui.grid.exporter']);
app.controller("uigridCtrl", function($scope, $http) {
$scope.getJSONData = function() {
$http.get('JSONdata.json')
.success(function(data) {
$scope.users = data;
});
};
$scope.uiGridOptions = {
data: 'users',
columnDefs: [{
field: 'name'
}, {
field: 'gender',
}, {
field: 'company'
}]
};
$scope.users = {
"data": []
};
$scope.Clear = function() {
$scope.users = {
"data": []
}
};
});
</script>
</head>
<body ng-app="uigridApp">
<div ng-controller="uigridCtrl">
<h1>In Angular UI Grid, Display No Records Found </h1>
<div>
<input type="button" style="color:red;" value="Click to Get Users" ng-click="getJSONData()" />
<input type="button" style="color:red;" value="Clear Users" ng-click="Clear()" />
</div>
<h3>User List</h3>
<div ui-grid="uiGridOptions" ui-grid-selection class="gridHeight">
<div ng-if="users.data.length==0">
<span style="color:red;">No Records Found.</span>
</div>
</div>
</div>
</body>
</html>
// Code goes here
/* Styles go here */
[
{
"name": "Anil Singh",
"gender": "Male",
"company": "code-sample.com"
},
{
"name": "Sunil",
"gender": "Male",
"company": "HCL"
},
{
"name": "Reena",
"gender": "female",
"company": "Angularu.com"
}
]