My js file:
var camListApp = angular.module('camListApp', ['ui.bootstrap', 'angularUtils.directives.dirPagination'])
camListApp.filter('unique', function() {
return function(input, key) {
var unique = {};
var uniqueList = [];
for(var i = 0; i < input.length; i++){
if(typeof unique[input[i][key]] == "undefined"){
unique[input[i][key]] = "";
uniqueList.push(input[i]);
}
}
return uniqueList;
};
});
camListApp.controller("Hello", function($scope, $http, $uibModal){
$scope.open = function (url){
$scope.imageView = url;
var modalInstance = $uibModal.open({
templateUrl: 'popup.html',
controller: 'ModalInstanceCtrl',
resolve: {
records : function () {
return $scope.imageView;
}
}
});
}
$http.get('http://localhost:8081/camera/list').then(function(response) {
console.log(response);
$scope.records= response.data;
});
});
angular.module('camListApp').controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, records) {
$scope.records = records;
$scope.ok = function () {
$uibModalInstance.close($scope.selected.item);
};
$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
});
My html file:
<html ng-app"camListApp">
<div ng-controller="Hello">
<table border = 1>
<thead>
<tr>
<th>CamID</th>
<th>Timestamp</th>
<th>Image</th>
<th>View image</th>
</tr>
</thead>
<tbody>
<tr dir-paginate="record in records | itemsPerPage:5 | filter:searchBox | orderBy:'+timestamp'">
<td>{{record.cameraid}}</td>
<td>{{record.timestamp}}</td>
<td><img ng-src="http://localhost:9100/Images/{{record.filename}}.png" width="40" height="50"></td>
<td><button class="btn btn-primary" ng-click="open(record.filename)">View</button></td>
</tr>
</tbody>
</table>
</div>
<script type="text/ng-template" id="popup.html">
<div class="modal-header">
<h3 class="modal-title">Image View</h3>
</div>
<div class="modal-body">
<img ng-src="http://localhost:9100/Images/{{imageView}}.png" width="40" height="50"></div>
<div class="modal-footer">
<button class="btn btn-warning" onclick="location.href='http://localhost:8082/';">Cancel</button>
</div>
</script>
I was trying to display my images on the modal form using bootstrap ui but don't know why the images does not display on the modal. Anybody can help me solve this? My images are store in a web server folder and retrieve it from there.
See Question&Answers more detail:os
