正文 

当前位置： 首页 > 问答 >

AngularJS从JSON的缩略图中获取模态图像

     2023-05-07     21

关键词：

【中文标题】AngularJS从JSON的缩略图中获取模态图像【英文标题】：AngularJS getting the image in modal from thumbnail from JSON 【发布时间】：2017-08-28 19:44:23 【问题描述】：

使用AngularJS获取JSON文件：


 "albumId": 1,
 "id": 1,
 "title": "accusamus beatae ad facilis cum similique qui sunt",
 "url": "http://placehold.it/600/92c952",
 "thumbnailUrl": "http://placehold.it/150/92c952"
,

并使用 ng-repeat 显示：

<div ng-repeat="image in images" class="col-xs-2 ">
   <div class="thumbnail">
      <img src=" image.thumbnailUrl "  ng-click="open()" />

   </div>
</div>

这行得通。比我将 ui.bootstrap 连接到缩略图以打开模式窗口。

控制器：

    app.controller("page3Ctrl",['$scope', '$resource', '$uibModal', function ($scope, $resource,$uibModal) 

    var postingsResource = $resource('http://jsonplaceholder.typicode.com/photos', );
    $scope.images = postingsResource.query();


    $scope.open = function() 
        var uibModalInstance = $uibModal.open(
            animation: true,
            templateUrl: 'modal.html'

        );
    ;

]);

工作正常。现在，我怎么可能从 thumbnailUrl 在模态 url 中显示特定图像？它们应该匹配。

【问题讨论】：

ng-repeat 这是一个有效的 HTML5 属性吗？还是我们根本不需要再关心？ 使用ng-src 而不是src。它将save you some 404s. @RokoC.Buljan，它是一个自定义的 HTML 属性指令，它内置在 AngularJS 框架中并由它解释。 【参考方案1】：

如果您没有为modal 使用任何控制器，那么您可以简单地将$scope 分配为模态范围，并将所选图像分配给scope 变量并在模态模板中访问它。

var app = angular.module('app', ['ngResource','ui.bootstrap']);
app.run(function($templateCache)
  $templateCache.put('modal.html', '<div><a ng-click="$close(true)" class="pull-right">&times close</a><img ng-src="currentImage.url"/></div>');
);
app.controller("page3Ctrl", ['$scope', '$resource', '$uibModal', function($scope, $resource, $uibModal) 

  var postingsResource = $resource('http://jsonplaceholder.typicode.com/photos', );
  $scope.images = postingsResource.query();

 //no controller for modal
  $scope.open = function(image) 
    $scope.currentImage = image;
    var uibModalInstance = $uibModal.open(
      animation: true,
      scope:$scope,
      templateUrl: 'modal.html'
    );
  ;
  
  /*
  //modal has controller
  $scope.open = function(image) 
    var uibModalInstance = $uibModal.open(
      animation: true,
      templateUrl: 'modal.html',
      resolve: 
        image: function()
          return image;
        
      ,
      controller: function($scope, image)
        $scope.currentImage = image;
      
    );
  ;
  */

]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-resource/1.5.11/angular-resource.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
<div ng-app="app" ng-controller="page3Ctrl">
  <div ng-repeat="image in images.slice(0,10)" class="col-xs-2 ">
    <div class="thumbnail" ng-click="open(image)">
      <img ng-src=" image.thumbnailUrl "  ng-click="open()" />

    </div>
  </div>
</div>

【讨论】：

【参考方案2】：

您可以向open 函数添加一个参数，并将图像的url 传递给它。像这样：

$scope.open = function(imageUrl) 
    var uibModalInstance = $uibModal.open(
        animation: true,
        templateUrl: 'modal.html',
        controller: ModalInstanceCtrl,
        resolve: 
           imageUrl: function () 
             return imageUrl;
           
        
    );

所以：

<img src=" image.thumbnailUrl "  ng-click="open(image.url)" />

参数也必须传递给模态控制器：

var ModalInstanceCtrl = function ($scope, $modalInstance, imageUrl) 
    $scope.imageUrl = imageUrl;
;

有关将值传递给模态控制器的更多详细信息：Pass parameter to modal

【讨论】：

imageUrl 返回正确的链接，但注入模态控制器会报错： app.controller('page3Ctrl',['$scope', '$resource', '$uibModal', 'imageUrl',函数 ($scope,$resource,$uibModal,imageUrl) 错误：$injector:unpr 未知提供者 如果你能创建一个 jsfiddle 或一个 plunker 或类似的东西会非常有帮助。 你在错误的地方注入了imageUrl。将其注入模态的控制器。查看更新的答案。 已修复，但仍然不知道如何以模态显示图像。

如何从社交媒体缩略图中排除 Jumbotron 图像？

】如何从社交媒体缩略图中排除Jumbotron图像？【英文标题】：HowtoExcludeJumbotronImagefromSocialMediaThumbnail?【发布时间】：2016-11-1722:42:33【问题描述】：每当我的博客文章被分享时，缩略图会自动首先显示为jumbotron图片，而不是默认为... 查看详情

使用 AngularJS 从 JSON 响应中获取图像 url

】使用AngularJS从JSON响应中获取图像url【英文标题】：GettingimageurlfromJSONresponseusingAngularJS【发布时间】：2014-03-1613:18:08【问题描述】：我正在尝试使用AngularJS从API获取图像。我正在使用链接来触发$http函数，并尝试将JSON响应中的... 查看详情

ipad缩略图中图像之间的空间

】ipad缩略图中图像之间的空间【英文标题】：spacebetweenimagesinthumbnailforipad【发布时间】：2012-10-0816:23:15【问题描述】：我用ipad的滚动视图创建缩略图照片，代码如下：//loadalltheimagesfrombundleandaddthemtothescrollviewNSUIntegeri;for(i=1;i<=... 查看详情

如何在引导缩略图中适合宽图像？

】如何在引导缩略图中适合宽图像？【英文标题】：howtofitawideimageinbootstrapthumbnail?【发布时间】：2017-04-0302:28:18【问题描述】：我有一个四列行(col-md-3)行。每列都有一个宽度为220像素和高度为360像素的缩略图。如何使用不同分... 查看详情

从照片库快速调整图像（ALAssets）的大小以获取缩略图

】从照片库快速调整图像（ALAssets）的大小以获取缩略图【英文标题】：Swiftresizingimages(ALAssets)fromPhotolibraryforthumbnails【发布时间】：2015-03-1319:23:43【问题描述】：我正在寻找解决方案，如何显示照片库中保存的图像的缩略图。我... 查看详情

如何避免在 django sorl 缩略图中拉伸图像

】如何避免在djangosorl缩略图中拉伸图像【英文标题】：Howtoavoidstretchingofimageindjangosorlthumbnails【发布时间】：2013-06-1611:10:37【问题描述】：我在我的应用程序中使用了sorl缩略图。现在我已经固定了代码中的宽度：%thumbnailuser.image"... 查看详情

保留缩略图中的原始比例

】保留缩略图中的原始比例【英文标题】：Keeptheoriginalratioinathumbnailimage【发布时间】：2016-03-0208:49:53【问题描述】：我在博客中使用100*60的缩略图，但有时我想使用方形图像。是否可以使用Wordpress插件或CSS通过在侧面添加背景... 查看详情

如何从 Swift 中的 ALAssetRepresentation 获取低分辨率图像或缩略图

】如何从Swift中的ALAssetRepresentation获取低分辨率图像或缩略图【英文标题】：Howtogetalowresimage,orThumbnailfromtheALAssetRepresentationinSwift【发布时间】：2015-08-2419:40:58【问题描述】：我正在与ALAssetLibrary合作，从我的相机胶卷中获取图像... 查看详情

ScrollTop 在砌体图像缩略图中找不到几个不同的数字元素 ID 之一以将页面滚动到图像

】ScrollTop在砌体图像缩略图中找不到几个不同的数字元素ID之一以将页面滚动到图像【英文标题】：ScrollTopNotfindingoneofseveraldifferentnumericelementidsinmasonryimagethumbnailstoscrollpagetotheimage【发布时间】：2021-07-3016:17:26【问题描述】：我有... 查看详情

如何从文件中获取缩略图

】如何从文件中获取缩略图【英文标题】：Howtogetthumbnailsfromafile【发布时间】：2020-08-0300:41:18【问题描述】：我已经构建了一个连接技术绘图应用程序(CAD-SolidEdge)和ERP系统的winform应用程序。这工作正常，但我无法在bomstructure中... 查看详情

如何从 iOS 中的 ALAsset 获取视频的缩略图？

】如何从iOS中的ALAsset获取视频的缩略图？【英文标题】：HowtogetthumbnailimageofvideofromALAssetiniOS?【发布时间】：2015-07-0707:42:40【问题描述】：我想从视频中获取每一帧的缩略图，然后将这些图像保存在可变图像数组中。我想用这些... 查看详情

在ios中上传后如何从firebase获取缩略图？

】在ios中上传后如何从firebase获取缩略图？【英文标题】：howtogetthumbnailimagefromfirebaseafteruploadinios?【发布时间】：2017-11-2618:53:49【问题描述】：我正在快速将视频和图像上传到Firebase。现在，当上传完成时，我正在获取图像url。... 查看详情

从 Bootstrap 3 的缩略图中删除烦人的白色背景

】从Bootstrap3的缩略图中删除烦人的白色背景【英文标题】：RemovingthatannoyingwhitebackgroundfromthumbnailsinBootstrap3【发布时间】：2017-07-0208:08:50【问题描述】：我创建了一小段代码，它在一行中显示4个缩略图，网格宽度相等。.row-content... 查看详情

AngularJS - 使用服务从服务器获取 JSON

】AngularJS-使用服务从服务器获取JSON【英文标题】：AngularJS-UsingaservicetogetJSONfromserver【发布时间】：2021-01-1103:43:05【问题描述】：我正在尝试学习AngularJS，需要一些帮助。我使用的是1.4.9版本，我正在尝试创建一个从服务器获取JS... 查看详情

自定义表格视图单元格中的 JSON 缩略图图像

】自定义表格视图单元格中的JSON缩略图图像【英文标题】：JSONThumbnailimageinCustomTableViewCell【发布时间】：2015-04-0816:29:49【问题描述】：我真的厌倦了试图解决这个问题，所以我想我需要一些帮助。我正在从我成功解析的API填充... 查看详情

如何从 JSON 获取数据以在 PrimeNG 折线图中使用？

】如何从JSON获取数据以在PrimeNG折线图中使用？【英文标题】：HowdoIgetdatafromJSONtouseinPrimeNGlineChart?【发布时间】：2018-04-0704:36:13【问题描述】：我正在尝试将数据从我的API加载到PrimeNG图表中，但没有任何运气。目前我一直在尝试... 查看详情

如何使用angularjs从json文件中获取数据

】如何使用angularjs从json文件中获取数据【英文标题】：howtogetdatafromjsonfileusingangularjs【发布时间】：2014-09-0615:39:13【问题描述】：我正在从json文件中获取数据以显示在表格中，但只有第一次我从getdata()获取数据时，下一次出现... 查看详情

如何从我的文件夹中获取缩略图？

】如何从我的文件夹中获取缩略图？【英文标题】：Howcanigetthumbnailsfrommyfolder?【发布时间】：2018-11-0720:48:59【问题描述】：我想知道如何使用C#在UWP中获取缩略图我想在我的文件夹中获取图像文件（gif、jpg等）的所有缩略图我阅... 查看详情