javascript - 是否可以为 AngularJS 中的 ng-repeat 的每个元素触发一个函数？

Question

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

我创建了一个 Plunker，如果您搜索一位艺术家，它会生成一个发行列表，如果您单击其中的每一个，就会出现封面艺术，但它会在每个 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;
      });
  }

Answer 1

您可以为 ngRepeat 创建的每个 release 对象创建一个新的 Controller 。

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

然后这个 Controller 只获取相册信息，并将所需的图像 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 被保存到主 Controller 范围，而不是重复发布对象的范围。

这是你的 plunker 的一个工作子集，它演示了如何以这种方式检索图像:http://plnkr.co/SMUVAngg444UICH6tULE