Question

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

我创建了一个Plunker，如果你搜索一个艺术家，它会生成一个版本列表，如果你点击它们中的每一个，就会出现封面艺术，因为它会出现相同的图像到每个div！

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

这是应该由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

您可以为release创建的每个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>

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

以下是您的plunker的一个有效子集，它演示了以这种方式检索图像：http://plnkr.co/SMUVAngg444UICH6tULE

Answer 2

当数据从搜索中返回时，您是否可以自动为每个数据启动getImages调用？然后，当数据进入时，将url放在结果对象中，并使用ng-repeat和/或ng-src来显示它们。

Answer 3

理想情况下，您可以在ng-repeat之前执行此操作。但这可能是很多数据电话。

相反，请考虑在ng-repeat中使用ng-init。

<div ng-repeat="data in datum" ng-init="getImages(data.title, data.name)"></div>

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

3 个答案: