以下是一个使用AngularJS动态加载多个文件夹的图像的解决方案的代码示例:
首先,确保你已经引入了AngularJS库文件。
HTML部分:
AngularJS动态加载多个文件夹的图像
{{ folder.name }}
JavaScript(app.js)部分:
var app = angular.module('myApp', []);
app.controller('myController', function($scope, $http) {
$scope.imageFolders = [
{ name: 'Folder 1', path: 'path/to/folder1' },
{ name: 'Folder 2', path: 'path/to/folder2' },
// 添加更多的文件夹...
];
$scope.loadImages = function(folder) {
$http.get(folder.path).then(function(response) {
var images = [];
var parser = new DOMParser();
var htmlDoc = parser.parseFromString(response.data, 'text/html');
var imgElements = htmlDoc.getElementsByTagName('img');
for (var i = 0; i < imgElements.length; i++) {
var image = {
name: imgElements[i].getAttribute('alt'),
src: folder.path + '/' + imgElements[i].getAttribute('src')
};
images.push(image);
}
folder.images = images;
});
};
angular.forEach($scope.imageFolders, function(folder) {
$scope.loadImages(folder);
});
});
在上面的示例中,我们首先在控制器中定义了一个imageFolders
数组,其中包含多个文件夹的名称和路径。然后,我们定义了一个loadImages
函数,该函数使用AngularJS的$http服务来加载每个文件夹中的图像。在函数中,我们首先通过发出一个GET请求来获取每个文件夹的HTML内容。然后,我们使用DOMParser解析HTML内容,并获取所有
元素。最后,我们将获取到的图像信息保存在每个文件夹对象的images
属性中。
在控制器中,我们使用angular.forEach
函数遍历imageFolders
数组,并对每个文件夹调用loadImages
函数来加载图像。
在HTML部分,我们使用ng-repeat
指令来循环遍历imageFolders
数组和每个文件夹的图像,并使用ng-src
指令来设置图像的路径。
请注意,上述示例假设每个文件夹中的图像都按照相对路径存储在HTML文件中,并且文件夹的路径是相对于HTML文件的。如果你的图像存储在不同的位置或使用不同的路径结构,请相应地修改代码。
希望这个例子能帮助到你!