Hi mahesh213,
Check this example. Now please take its reference and correct your code.
Image and pdf file will be previewed in iframe. Excel and doc file will be downloaded on click of preview.
View
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.8/angular.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/angular-utils-pagination@0.11.1/dirPagination.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-touch/1.6.1/angular-touch.min.js"></script>
<script type="text/javascript" src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<script type="text/javascript">
var app = angular.module("MyApp", [ 'ui.bootstrap']);
app.controller("MyController", ['$scope', '$http', '$uibModal', function ($scope, $http, $uibModal) {
$scope.terms = [{ Id: 1, Resume: " F:/Upload a file inmaster(asp.net)/Upload a file inmaster(asp.net)/App_Dat/Test.jpg", Name: "aaaa" },
{ Id: 2, Resume: " F:/Upload a file inmaster(asp.net)/Upload a file inmaster(asp.net)/App_Dat/Test.pdf", Name: "bbbb" },
{ Id: 3, Resume: " F:/Upload a file inmaster(asp.net)/Upload a file inmaster(asp.net)/App_Dat/Test.xlsx", Name: "cccc" },
{ Id: 4, Resume: " F:/Upload a file inmaster(asp.net)/Upload a file inmaster(asp.net)/App_Dat/Test.doc", Name: "dddd"}];
$scope.GetDetails = function (filename) {
$scope.modalInstance = $uibModal.open({
ariaLabelledBy: 'modal-title',
ariaDescribedBy: 'modal-body',
templateUrl: 'popup.htm',
controller: 'ModelHandlerController',
controllerAs: '$ctrl',
size: 'md',
resolve: {
Name: function () {
return filename;
}
}
});
}
} ]);
app.controller("ModelHandlerController", function ($scope, $uibModalInstance, Name) {
$scope.Resume = "App_Data/" + Name;
$scope.Cancel = function () {
$uibModalInstance.dismiss('close');
}
});
</script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
<form id="form1" runat="server">
<div class="container">
<div>
<div id="dvContainer">
<div>
<div class="table-responsive ">
<table id="dvData" cellpadding="12" class="table table-bordered" style="margin-left: 20px;
margin-right: 20px;">
<tr class="success">
<th><b>Id</b></th>
<th><b>File</b></th>
<th><b>Name</b></th>
<th><b>Actions</b></th>
</tr>
<tr dir-paginate="state in terms |orderBy:sortKey:reverse|itemsPerPage:10" ng-model="search">
<td>{{state.Id}}</td>
<td>{{state.Resume.split('/')[state.Resume.split('/').length-1]}}</td>
<td>{{state.Name }}</td>
<td>
<input type="button" value="View Details" ng-click="GetDetails(state.Resume.split('/')[state.Resume.split('/').length-1])"
class="btn btn-primary" />
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</form>
</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">details</h3>
</div>
<div class="modal-body" align="center">
<iframe src="{{Resume}}" height="200px" width="500px"></iframe>
</div>
<div class="modal-footer">
<button class="btn btn-warning" type="button" ng-click="Cancel()">Cancel</button>
</div>
</body>
</html>
Screenshot
