AngularJS Positioned Photo Output

Question

Having passed an identifier to the load function, I pull out the file names from the table from which I later generate links and click the links to the photo on click.

<div ng-repeat="img in photo"> <a href="" ng-click="showImg = !showImg;load(img.id)">Show images</a> <span id="list_photo" ng-show="showImg"></span> </div>

Function:

 $scope.image = function (id) { $http.get('http://site.com/photo/img/'+id) .then(function success(response) { img = response.data; console.log('Ответ: ', response.data); var currentIndex = 0; $("#list_photo").html("<img src='#' />"); $("#list_photo > img").click(function () { if (currentIndex >= img.length) currentIndex = 0; $(this).attr("src", "/public/upload/pict/"+ img[currentIndex++].filename); }); $("#list_photo > img").click(); }); };

The fact is that for some reason only a photo is opened, the link of which is above all, i.e. last one. If I click on the remaining Show images , I see in the console that the file names are returned, but the photo does not open near the link. How can I tie these photos to specific positions of Show images ?

But than to replace here the piece starting with var currentIndex = 0, I find it difficult to answer.

Accepted Answer · 2017-10-11T03:37:07

You need to think about how to solve a problem not through jQuery , but through angular . He has his own approaches.

I would advise you to remove jQuery from your project altogether . This will help you think without relying on jQuery experience.

Important differences:

In jQuery we often create elements, bind events to them.
in angular we use a ready-made template, with ready-made events.

An example on jsfiddle .

 angular.module('ExampleApp', []) .controller('ExampleController', function(PhotoService) { var vm = this; vm.showImg = false; vm.photos = [{ id: 1 }, { id: 2 }]; vm.load = function(photo) { vm.showImg = !vm.showImg; //Не загружать повторно, если уже загрузили if (photo.images) return; PhotoService.getPhoto(photo.id) .then(function success(response) { photo.images = response.data; console.log('Ответ: ', response.data); }); }; }) .service("PhotoService", function($http, $q) { this.getPhoto = function(id) { //симуляция запроса return $q.resolve({ data: [{ filename: "https://lorempixel.com/400/200/people/" + id, }, { filename: "https://lorempixel.com/400/200/people/" + (id * 2), }, { filename: "https://lorempixel.com/400/200/people/" + (id * 3), }] }); //В реальности делаем запрос к серверу //return $http.get('http://site.com/photo/img/' + id); }; });

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <div ng-app="ExampleApp"> <div ng-controller="ExampleController as vm"> <div ng-repeat="photo in vm.photos"> <a href="" ng-click="vm.load(photo)">Show images</a> <span ng-show="vm.showImg"> <!-- Вместо динамического построений элементов, мы отрисовываем уже существующие. --> <img ng-repeat="img in photo.images" ng-src="{{img.filename}}" /> </span> </div> </div> </div>

But is it possible to display a photo one by one, and when you click on it, display the others one by one?
@ValeryOrlov Please update your question with a description of the desired behavior.
Based on the fact that I use Twig in the project, to work Angular I use the replacement method {{}} with // //.
So when generating a link, it turns out something like this: site.ru/photo/pict//img.filename// - which of course cannot work in any way.
Funny and sinful, but no thoughts on how to get around this?
It is difficult to say that it does not work when you do not see how this is done.

AngularJS Positioned Photo Output

1 answer 1

More articles: