来自 JSON 文件的 AngularJS 缩略图不会加载；如何通过单击缩略图显示大图像

Question

我正在使用 AngularJS 从 JSON 文件中读取图像数据，这很有效。

接下来，我需要将所有缩略图加载到画廊 div 并填充我使用 ng-repeat 读取的图像数据的 src、alt 和 title 属性，但是它不起作用。因此，没有加载缩略图。会发生什么？

然后，当单击任何缩略图时，mainImg div 上应显示常规大小的图像。我不确定代码的设置方式是否有效？

这些是我的代码-

HTML

<!-- regular image display area -->
<div class="mainImg"> <!-- Regular image area  -->
    <img class="large" id="changer" src="images/bird.jpg" />
    <p id="imgMsg">Bird fly.</p>
</div>

<!-- thumbnail area -->
<div class="gallery" ng-repeat="img in images">
     <img class="thumb" ng-src="{{ img.thumbnail }}" alt="{{ img.image }}" title="{{ img.msg }}" ng-click="showImage()" />
</div>

json 文件

{ “图片”： [ { “缩略图”：“图像/bird-thumb.jpg”， "image": "images/bird.jpg", “味精”：“鸟飞。” },{ "thumbnail": "images/duck-thumb.jpg", "image": "images/duck.jpg", “味精”：“鸭子游泳。” }, { "thumbnail": "images/bear-thumb.jpg", "image": "images/bear.jpg", “味精”：“熊抱。” }, { “缩略图”：“图像/dog-thumb.jpg”， "image": "images/dog.jpg", “味精”：“狗吠。” } ] }

AngularJS

var myApp = angular.module('imgApp', []); mgApp.controller('imageController', ['$scope', '$http', function ($scope, $http) { '使用严格'; $scope.images = []; $http.get('data/images.json').success(function (data) { $scope.images = 数据； 控制台.log($scope.images); }); $scope.showImage = 函数 () { $(".thumb").click(function () { //获取该图像的altSrc属性值 var alt = $(this).attr("alt"); // 获取缩略图的 alt 值 var msg = $(this).attr("title"); //将主图像src设置为该值 $("#changer").attr("src", altSrc); // 将主图像标题设置为该值 $("#imgMsg").text(msg); }); }]);

Answer 1

你需要改变你的 showImage 函数并接受一个实体，使用 $modal.open 来预览大图，就像我的代码一样

<!-- thumbnail area -->
<div class="gallery" ng-repeat="img in images">
     <img class="thumb" ng-src="{{ img.thumbnail }}" alt="{{ img.image }}" title="{{ img.msg }}" ng-click="showImage(img)" />
</div>


$scope.showImage = function (img) {
    $modal.open({
        templateUrl: 'templates/image.html',
        size: "sm",
        controller: ['$scope',
            function(scope) {
                scope.entity = img;

            }
        ]
    });
);

image.html

<!-- regular image display area -->
<div class="mainImg"> <!-- Regular image area  -->
    <img class="large" id="changer" ng-src="{{entity.thumbnail}}" />
    <p id="imgMsg">{{ entity.msg }}</p>
</div>