Hi rani,
Check this example. Now please take its reference and correct your code.
HTML
Default
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="//cdn.rawgit.com/angular-ui/ng-grid/v2.0.14/ng-grid.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
<script type="text/javascript" src="//cdn.rawgit.com/angular-ui/ng-grid/v2.0.14/build/ng-grid.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-touch/1.6.1/angular-touch.min.js"></script>
<script type="text/javascript" src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', ['ngGrid', 'ui.bootstrap']);
app.controller('MyController', function ($scope, $uibModal) {
$scope.Employees = [
{ Id: 1, Name: 'Nancy Davolio', City: 'Seattle', Country: 'USA' },
{ Id: 2, Name: 'Andrew Fuller', City: 'Tacoma', Country: 'USA' },
{ Id: 3, Name: 'Janet Leverling', City: 'Kirkland', Country: 'USA' },
{ Id: 4, Name: 'Margaret Peacock', City: 'Redmond', Country: 'USA' },
{ Id: 5, Name: 'Steven Buchanan', City: 'London', Country: 'UK' },
{ Id: 6, Name: 'Michael Suyama', City: 'London', Country: 'UK' },
{ Id: 7, Name: 'Robert King', City: 'London', Country: 'UK' },
{ Id: 8, Name: 'Laura Callahan', City: 'Seattle', Country: 'USA' },
{ Id: 9, Name: 'Anne Dodsworth', City: 'London', Country: 'UK' }
];
$scope.GridOptions = {
data: 'Employees',
enablePinning: false,
multiSelect: false,
beforeSelectionChange: function (row) {
$scope.modalInstance = $uibModal.open({
ariaLabelledBy: 'modal-title',
ariaDescribedBy: 'modal-body',
templateUrl: 'popup.htm',
controller: 'ModelHandlerController',
controllerAs: '$ctrl',
size: 'md', // sm-small // md-medium // lg-large
resolve: {
Employee: function () {
return row.entity;
}
}
});
return true;
},
columnDefs: [{ field: "Id", width: 50, sortable: false, enableCellEdit: false },
{ field: "Name", width: 150, sortable: true, enableCellEdit: false },
{ field: "City", width: 100, sortable: true, enableCellEdit: false },
{ field: "Country", width: 100, sortable: true, enableCellEdit: false}]
};
});
app.controller("ModelHandlerController", function ($scope, $uibModalInstance, Employee) {
$scope.Employee = Employee;
$scope.Cancel = function () {
$uibModalInstance.dismiss('close');
}
});
</script>
</head>
<body>
<div ng-app="MyApp" ng-controller="MyController">
<div ng-grid="GridOptions" style="width: 400px; height: 500px">
</div>
</div>
</body>
</html>
Popup
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div class="modal-header">
<h3 class="modal-title text-center"><u>{{Employee.Name.trim()}}</u> details</h3>
</div>
<div class="modal-body" align="center">
<span><b>Employee Id : </b></span>{{Employee.Id}}<br />
<span><b>City : </b></span>{{Employee.City}}<br />
<span><b>Country : </b></span>{{Employee.Country}}<br />
</div>
<div class="modal-footer">
<button class="btn btn-warning" type="button" ng-click="Cancel()">Cancel</button>
</div>
</body>
</html>
Screenshot
