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

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

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

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

这是我的密码-

HTML

鸟飞

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." } ] } { “图像”：[ { “缩略图”：“images/bird thumb.jpg”， “image”：“images/bird.jpg”， “msg”：“鸟飞。” },{ “缩略图”：“images/duck thumb.jpg”， “image”：“images/duck.jpg”， “味精”：“鸭子游泳。” }, { “缩略图”：“images/bear thumb.jpg”， “image”：“images/bear.jpg”， “msg”：“熊抱” }, { “缩略图”：“images/dog thumb.jpg”， “image”：“images/dog.jpg”， “味精”：“狗叫。” } ] } 安格拉斯

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); }); }]); var myApp=angular.module（'imgApp'，[]）； mgApp.controller（'imageController'，['$scope'，'$http'，函数（$scope，$http）{ "严格使用",； $scope.images=[]； $http.get（'data/images.json'）.success（函数（数据）{ $scope.images=数据； log（$scope.images）； }); $scope.showImage=函数（）{ $（“.thumb”）。单击（函数（）{ //获取该图像的altSrc属性值 var alt=$（this.attr（“alt”）； //获取缩略图的alt值 var msg=$（this.attr（“title”）； //将主图像src设置为该值 $（“#转换器”）.attr（“src”，altSrc）； //将主图像标题设置为该值 $（“#imgMsg”）.text（msg）； }); }]);

---

您需要更改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;

            }
        ]
    });
);

$scope.showImage=函数（img）{
$modal.open({
templateUrl:'templates/image.html'，
大小：“sm”，
控制器：[“$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>

{{entity.msg}

我能够从JSON文件中检索到-Images:Array[4]0:Object缩略图：“Images/bird thumb.jpg”，image:“Images/bird.jpg”，msg:“bird fly.”1:Object 2:Object但是，缩略图仍然无法加载删除此行：$scope.Images=[]；感谢您的建议。即使删除$scope.images=[]；缩略图仍然不会加载。这是源代码中的内容-并且在删除{images:}之后，div只出现一次在JSON文件的图层中，缩略图成功加载。谢谢@thinkling。经过轻微调整后，我可以通过单击缩略图来运行showImage功能。谢谢您的帮助！

<!-- 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>