如何在 Angular 中移动图像数组（blob）？

Question

我的页面上显示了一个图片库。每当用户单击图像时，我都需要实现一个模式。在模式中，我需要显示所选图像的完整尺寸。这就是问题所在：我已经完成了模态工作，但是当我单击任何图库图像时，模态会在一个模态中一起显示所有这些图像。我需要模式只显示用户点击的那个。

请注意，我的网页是基于 AngularJS 和 PHP。我使用了 ngModal 这个模态，我是新手 Angular （基本上我什么都不知道，我正在学习），所以请耐心等待。这是我的代码：

app.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>

Answer 1

在模式中显示用户点击的图像的一种方法是引入范围变量，例如$scope.selectedImage。接下来，在函数 toggleModal() 中，接受图像参数并将该范围变量设置为该参数。

$scope.toggleModal = function(image) {
    $scope.myData.modalShown = !$scope.myData.modalShown;
    $scope.selectedImage = image;
};

接下来更新 ng-click 处理程序中对该函数的调用：

<img src="php/visualizar_archivo.php?id={{i.id}}" ng-click='toggleModal(i);' class = "img-responsive img-rounded">

然后在模态标记中显示所选图像。

<modal-dialog show='myData.modalShown' width='75%' height='80%' on-close='logClose()'>
  <img src="php/visualizar_archivo.php?id={{selectedImage.id}}">
</modal-dialog>

这样模式将只显示用户点击的图像，而不是列表中的所有图像。

请参阅下面的演示。

readApp = angular.module('readApp', ["ngModal"]);
readApp.controller('newsGallery', function($scope) {
  $scope.idsBlobs = [{
      "id": 'MA',
      "src": "http://www.animatedimages.org/data/media/96/animated-lighthouse-image-0032.gif"
    },
    {
      "id": "MU",
      "src": "http://icons.iconarchive.com/icons/aha-soft/large-home/128/Museum-icon.png"
    }
  ];

  $scope.myData = {
    modalShown: false
  }
  $scope.logClose = function() {
    console.log('close!');
  };
  $scope.toggleModal = function(image) {
    $scope.myData.modalShown = !$scope.myData.modalShown;
    $scope.selectedImage = image;
  };
});

.img-thumb {
  height: 48px;
  width: 48px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="//elliott.andrewz.org/cdn/ng-modal.min.js"></script>
<link href="//elliott.andrewz.org/cdn/ng-modal.css" rel="stylesheet" />
<div ng-app="readApp" ng-controller="newsGallery">
  <modal-dialog show="myData.modalShown" width="75%" height="80%" on-close="logClose()">
    <img src="{{ selectedImage.src }}" />
  </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="{{ i.src }}" class="img-responsive img-rounded img-thumb" ng-click="toggleModal(i);" />
      </div>
    </div>
  </div>
</div>

如何在 Angular 中移动图像数组（blob）？

how to move in an array of images (blobs) in Angular?

html

javascript

php

angularjs

ng-modal