在 ng-repeat 循环中显示来自不同文件夹的图像答案

【问题标题】：Showing images from different folders inside ng-repeat loop在 ng-repeat 循环中显示来自不同文件夹的图像
【发布时间】：2015-04-08 02:39:57
【问题描述】：

我有一些从 ng-repeat 中的数据库提供的数据（产品）。每个产品都有自己的 id，它指的是带有图像的文件夹。我想在循环内显示产品的图像，但不幸的是我不知道如何使用 Angular 来做到这一点。

我使用 PHP 作为服务器端 API，并创建了按 id 扫描文件夹的功能。

在 Angular 内部，我试图通过产品 ID 获取这些图像，但它仅适用于第一次产品迭代。其他的不显示任何图像。

<div ng-repeat="product in products">

  <div ng-init="scanImages( product.id )"></div>

  <div ng-repeat="image in images">
    <img ng-src="path/{{product.id}}/{{image}}" alt="">
  </div> 

</div>

在控制器中：

$scope.scanImages = function( productId ) {

    $http.get( 'api/images/scan/' + productId ).
    success( function( data ) {
        $scope.images = data;
    });

};

有什么想法吗？

【问题讨论】：

可能是另一个 ng-repeat 中的 ng-repeat 问题，尝试在内部 ng-repeat 中添加“image in images track by $index”

标签： javascript angularjs image file angularjs-ng-repeat

【解决方案1】：

每个 $http.get 都写入同一个范围变量 ($scope.images)。我可能会将图像作为产品对象上的数组，以使它们彼此分开。也许是这样的：

$scope.getProducts = function() {
    $http.get('api/products').
    success( function( data ) {
        $scope.products = data;
        for(var i = 0; i < $scope.products.length; i++) {
            $scope.getImages($scope.products[i]);
        }
    });
};

$scope.getImages = function( product ) {
    $http.get( 'api/images/scan/' + product.Id ).
    success( function( data ) {
        product.images = data;
    });
};

HTML：

<div ng-repeat="product in products">
  <div ng-repeat="image in product.images">
    <img ng-src="path/{{product.id}}/{{image}}" alt="">
  </div> 
</div>

【讨论】：