dongzhang4301
2017-04-07 16:23
浏览 69

如何在Angular中移动图像(blob)?

I have an image gallery displayed on my page. I need to implement a modal for whenever the user clicks on the images. In the modal I need to show the full size of the selected image. Here is the problem: I have already made the modal work, but when I click on any of the gallery images, the modal shows all of them together in a single modal. I need the modal to only show the one that the user clicked on.

Please note that my webpage is based on AngularJS and PHP. I used ngModal for this modal and that I'm new to using Angular (basically I know nothing, I'm learning), so please be patient with me. Here is my code:

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>

图片转代码服务由CSDN问答提供 功能建议

我的页面上显示了一个图库。 我需要在用户点击图像时实现模态。 在模态中,我需要显示所选图像的完整大小。 问题在于:我已经完成了模态工作,但是当我点击任何一个图库图像时,模态会在一个模态中一起显示所有这些图像。 我需要模态只显示用户点击的那个。

请注意,我的网页基于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; 
}; 
}); 
   
 
 <  p>  HTML   
 
 
 &lt; div ng-controller ='newsGallery'&gt; 
&lt; modal-dialog show ='myData.modalShown'  width ='75%'height ='80%'on-close ='logClose()'&gt; 
 
&lt; div ng-repeat =“i in idsBlobs”&gt; 
&lt; img src =“php  /visualizar_archivo.php?id={{i.id}}">
&lt; / div&gt; 
&lt; / modal-dialog&gt; 
 
&lt; div class =“row”style =“display:  flex; flex-wrap:wrap;“&gt; 
&lt; div class =”col-md-4“ng-repeat =”i in idsBlobs“&gt; 
&lt; div class =”news-image“align =  “center”&gt; 
&lt; img src =“php / visualizar_archivo.php?id = {{i.id}}”class =“img-respons  ive img-rounded“ng-click ='toggleModal();'&gt; 
&lt; / div&gt; 
&lt; / div&gt; 
&lt; / div&gt;  
&lt; / div&gt; 
   
 
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • dqwh1208 2017-04-07 17:33
    已采纳

    One way to have the image that the user clicked on shown in the modal is to introduce a scope variable e.g. $scope.selectedImage. Next, in the function toggleModal(), accept an argument for the image and set that scope variable to that argument.

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

    Next update the call to that function in the ng-click handler:

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

    Then in the modal markup, show that selected image.

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

    That way the modal will only show the image that the user clicked on, instead of all images in the list.

    See a demonstration of this below.

    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>

    </div>
    
    点赞 打赏 评论

相关推荐 更多相似问题