是否可以在AngularJS中为ng

是否可以在AngularJS中为ng-repeat的每个元素触发一个函数？(Is it possible to trigger a function for each element of an ng-repeat in AngularJS?)

我有一个ng-repeat会生成一个div元素列表。 我想要做的是，对于这些元素中的每一个，函数都会触发并获取特定于ng-repeat的每个div的图像url。

我创建了一个Plunker，如果你搜索一个艺术家，它会生成一个发布列表，如果你点击其中的每一个，封面艺术将会出现，buuut它会出现相同的图像到每个div！

长话短说，如何自动化进程（不需要ng-click），并使每个图像填充每个对应的div？

Plunker

这是由ng-repeat的每个元素分别触发的功能：

$scope.getImages = function (title, name) { $http.get('http://ws.audioscrobbler.com/2.0/?method=album.getinfo&api_key=e8aefa857fc74255570c1ee62b01cdba&artist=' + name + '&album='+ title +'&format=json'). success(function(data4) { $scope.images = data4; }); }

I have an ng-repeat that will generate a list of div elements. What I'm trying to do is that for each of these elements, a function will trigger and get an image url specific to each div of the ng-repeat.

I've created a Plunker, if you search for an artist it will generate a list of releases, and if you click on each one of them, the cover art will appear, buuut it will appear the same image to each div!

So long story short, how to automatize the process (no ng-click required) and to make each image populate each corresponding div?

Plunker

This is the function that should be triggered by each element of the ng-repeat by separate:

$scope.getImages = function (title, name) { $http.get('http://ws.audioscrobbler.com/2.0/?method=album.getinfo&api_key=e8aefa857fc74255570c1ee62b01cdba&artist=' + name + '&album='+ title +'&format=json'). success(function(data4) { $scope.images = data4; }); }

最满意答案

您可以为由ngRepeat创建的每个release对象创建一个新的控制器。

<div class="col-md-3" ng-repeat="release in releases" ng-controller="ImageCtrl"> <div class="release">{{release.title}} <img class="img-responsive" ng-src="{{image}}" /> </div> </div>

这个控制器然后获取专辑信息，并将所需的图像url保存到release对象范围内的变量上：

app.controller("ImageCtrl", function ($scope, $http) { $http.get('http://ws.audioscrobbler.com/2.0/?method=album.getinfo&api_key=e8aefa857fc74255570c1ee62b01cdba&artist=' + $scope.artist.name + '&album=' + $scope.release.title + '&format=json') .success(function (data4) { $scope.image = data4.album.image[2]['#text']; } ); });

我怀疑这不起作用，因为url被保存到主控制器作用域，而不是重复的发布对象的作用域。

这里是你的抢劫者的一个工作子集，这表明以这种方式夺回图像： http ://plnkr.co/SMUVAngg444UICH6tULE

You can create a new controller for each release object created by ngRepeat.

<div class="col-md-3" ng-repeat="release in releases" ng-controller="ImageCtrl"> <div class="release">{{release.title}} <img class="img-responsive" ng-src="{{image}}" /> </div> </div>

This controller then just gets the album information, and saves the desired image url to a variable on the the release object's scope:

app.controller("ImageCtrl", function ($scope, $http) { $http.get('http://ws.audioscrobbler.com/2.0/?method=album.getinfo&api_key=e8aefa857fc74255570c1ee62b01cdba&artist=' + $scope.artist.name + '&album=' + $scope.release.title + '&format=json') .success(function (data4) { $scope.image = data4.album.image[2]['#text']; } ); });

I suspect that this wasn't working for you because the url was being saved to the main controller scope, instead of the repeated release object's scope.

Here is a working subset of your plunker, that demonstrates retreiving the images this way: http://plnkr.co/SMUVAngg444UICH6tULE