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

Showing images from different folders inside ng-repeat loop

本文关键字：文件夹 图像 显示 ng 循环      更新时间：2023-09-26

我有一些数据（产品）来自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;
    });
};

知道吗？

每个$http.get都在向同一个scope变量（$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>
相关文章：