javascript - 来自 JSON 文件的 AngularJS 缩略图无法加载；如何通过点击缩略图显示大图

Question

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

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

然后，当单击任何缩略图时，常规尺寸的图像应该显示在 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文件

    {
        "images": [
            {
                "thumbnail": "images/bird-thumb.jpg",
                "image": "images/bird.jpg",
                "msg": "Bird fly."
            },{
                "thumbnail": "images/duck-thumb.jpg",
                "image": "images/duck.jpg",
                "msg": "Duck swim."
            },
            {
                "thumbnail": "images/bear-thumb.jpg",
                "image": "images/bear.jpg",
                "msg": "Bear hug."
            },
            {
                "thumbnail": "images/dog-thumb.jpg",
                "image": "images/dog.jpg",
                "msg": "dog bark."
            }
        ]
    }

AngularJS

    var myApp = angular.module('imgApp', []);

    mgApp.controller('imageController', ['$scope', '$http', function ($scope, $http) {
      'use strict';
      $scope.images = [];

      $http.get('data/images.json').success(function (data) {
        $scope.images = data;
        console.log($scope.images);
      });

      $scope.showImage = function () {
        $(".thumb").click(function () {
            //Get that image's altSrc attribute value
            var alt = $(this).attr("alt");
            // Get the alt value for the thumbnail
            var msg = $(this).attr("title");

            //Set the main images src to that value
            $("#changer").attr("src", altSrc);
            // set the main images caption to that value
            $("#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;

            }
        ]
    });
);

图片.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>