AngularJS通过点击

Question

通过点击链接显示照片显示阵列的最后一个图像。 控制器：

app.controller('ExampleController', function(PhotoService, $scope) { 
    var vm = this; 
    vm.showImg = false; 
    vm.load = function(event) { 
     vm.showImg = !vm.showImg; 
     if ($scope.link) 
     return; 

     PhotoService.getPhoto(event.rid) 
     .then(function success(response) { 
     response.data.forEach(function (element, index) { 
     $scope.link = '/load/img/'+ response.data[index].filename; 
     }); 
     }); 
    }; 
    }) 

    .service("PhotoService", function($http, $q) { 
    this.getPhoto = function(rid) { 
    return $http.get('http://portal.com/device/record/' + rid); 
    }; 
    }); 

查看：

<a href="" ng-click="ShowImg = !ShowImg;vm.load(event)">Show images</a> 
<img ng-show="ShowImg" ng-src="// link //" alt="фото"/> 

如何通过点击打开的图像上进行，而不是将其显示在数组中以下。

Answer 1

有在你的代码中的错误：

这里：

PhotoService.getPhoto(event.rid) 
    .then(function success(response) { 
     response.data.forEach(function (element, index) { 
     $scope.link = '/load/img/'+ response.data[index].filename; 
    }); 
}); 

你应该使用虚拟机来代替$范围，并保持完整的数组：

PhotoService.getPhoto(event.rid) 
    .then(function success(response) { 
     vm.links = []; 
     response.data.forEach(function (element, index) { 
     vm.links.push('/load/img/'+ response.data[index].filename); 
    }); 
}); 

你缺少一些VM在这里：

<a href="" ng-click="ShowImg = !ShowImg;vm.load(event)">Show images</a> 
<img ng-show="ShowImg" ng-src="// link //" alt="фото"/> 

它应该是：

<a href="" ng-click="vm.ShowImg = !vm.ShowImg;vm.load(event)">Show images</a> 
<img ng-show="vm.ShowImg" ng-src="// link //" alt="фото"/> 

最后是在NG-src属性你必须要呈现的图像。但要记住，你有像阵列...所以我不知道你想做什么。可以渲染一个图像是这样的：

<img ng-show="vm.ShowImg" ng-src="vm.links[0]" alt="фото"/>