我的页面上显示了一个图片库。每当用户单击图像时,我都需要实现一个模式。在模态中,我需要显示所选图像的全尺寸。问题是:我已经使模态工作,但是当我单击任何图库图像时,模态将所有这些图像一起显示在一个模态中。我需要模态仅显示用户单击的模态。
请注意,我的网页基于 AngularJS 和 PHP。我将ngModal用于此模式,并且我是使用 Angular 的新手(基本上我什么都不知道,我正在学习),所以请耐心等待。这是我的代码:
应用程序.js
readApp.controller('newsGallery', function($scope) {
$scope.myData = {
modalShown: false,
}
$scope.logClose = function() {
console.log('close!');
};
$scope.toggleModal = function() {
$scope.myData.modalShown = !$scope.myData.modalShown;
};
});
HTML
<div ng-controller='newsGallery'>
<modal-dialog show='myData.modalShown' width='75%' height='80%' on-close='logClose()'>
<div ng-repeat = "i in idsBlobs" >
<img src="php/visualizar_archivo.php?id={{i.id}}">
</div>
</modal-dialog>
<div class="row" style="display:flex; flex-wrap: wrap;">
<div class = "col-md-4" ng-repeat = "i in idsBlobs" >
<div class="news-image" align="center">
<img src="php/visualizar_archivo.php?id={{i.id}}" class = "img-responsive img-rounded" ng-click='toggleModal();'>
</div>
</div>
</div>
</div>