Question

我有一些数据（产品）来自ng-repeat内的数据库。每个产品都有自己的ID，它指的是带图像的文件夹。我想在循环中显示产品的图像，但不幸的是我无法弄清楚如何使用Angular来做这件事。

我正在使用PHP作为服务器端API，并通过id实现了扫描文件夹的功能。

Inside 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;
    });

};

有什么想法吗？

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

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

1 个答案: