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="фото"/>