我的js文件:
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');
};
});
我的 html 文件:
<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>
我试图使用 bootstrap ui 在模态表单上显示我的图像，但不知道为什么图像不显示在模态上。有人可以帮我解决这个问题吗？我的图像存储在网络服务器文件夹中并从那里检索它。
请您参考如下方法:
index.html
----------
<!doctype html>
<html ng-app="plunker">
<head>
<script src="https://code.angularjs.org/1.2.18/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3>I'm a modal!</h3>
</div>
<form ng-submit="submit()">
<div class="modal-body">
<img ng-repeat="img in imgs" ng-src="{{img}}"/> {{img}}
</div>
<div class="modal-footer">
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
<input type="submit" class="btn primary-btn" value="Submit" />
</div>
</form>
</script>
<button class="btn" ng-click="open()">Open me!</button>
<div ng-show="selected">Selection from a modal: {{ selected }}</div>
</div>
</body>
</html>
example.js
---------
angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal, $log,$sce) {
$scope.open = function () {
var parentScope = $scope;
$scope.imgs =[];
$scope.imgs.push($sce.trustAsUrl("http://dummyimage.com/64X64/000/f00"));
$scope.imgs.push($sce.trustAsUrl("http://dummyimage.com/64X64/000/0f0"));
$scope.imgs.push($sce.trustAsUrl("http://dummyimage.com/64X64/000/00f"));
$modal.open({
templateUrl: 'myModalContent.html',
backdrop: true,
windowClass: 'modal',
controller: function ($scope, $modalInstance) {
$scope.imgs = parentScope.imgs;
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
}
});
};
};
