javascript - 如何使用 angularjs 一次添加多个图像

Question

我只是初学者，想从我的文件夹中添加大约 1000 张图像，但我尝试了很多次但仍然无法做到这一点。我正在使用 angularjs 并能够使用 $scope.image['image1.jpg','image2.jpg'] 进行显示，并且可以在 ng-repeat 中显示它，那又怎样我可以做1000张图片吗？我会一一加载吗？请指导我是否有更好的解决方案？我想添加这样的文件夹

var folderOfImages=/images/ "1000 images are here"

我正在这样做:

app.controller('PageCtrl', ['$scope', 'filterFilter', function ($scope, filterFilter) {
$scope.items = [{
    src: '../images/gallery/6th-september/2013-09-07-09-42-23.jpg', desc: 'Image 01'
}, {
    src: '../images/gallery/6th-september/2013-09-07-09-42-36.jpg', desc: 'Image 01'
}, {
    src: '../images/gallery/6th-september/2013-09-07-09-42-46.jpg', desc: 'Image 01'
}, {
    src: '../images/gallery/6th-september/2013-09-07-09-43-29.jpg', desc: 'Image 01'
}, {
    src: '../images/gallery/6th-september/2013-09-07-09-43-43.jpg', desc: 'Image 01'
}, {
    src: '../images/gallery/6th-september/2013-09-07-09-43-56.jpg', desc: 'Image 01'
}, {
    ...
}];

Answer 1

您可以将 ng-repeat 用于 $scope 中的数组，如下所示，这就是您所需要的吗？

如果你需要先加载文件名，你需要使用后端来完成，因为javascript不允许检查系统信息。但这很容易。不幸的是，我不知道您需要哪个后端，所以看看这些解决方案:

• C# Backend Solution
• node.js Backend Solution

(function(angular) {
angular.module('ngRepeat', []).controller('repeatController', function($scope) {
  $scope.images = [
    "http://lorempixel.com/output/technics-q-g-100-100-1.jpg",
    "http://lorempixel.com/output/technics-q-g-100-100-2.jpg",
    "http://lorempixel.com/output/technics-q-g-100-100-3.jpg",
    "http://lorempixel.com/output/technics-q-g-100-100-5.jpg",
    "http://lorempixel.com/output/technics-q-g-100-100-6.jpg"
  ];
});
})(window.angular);

div { 
  display: inline-block;
  padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="ngRepeat" ng-controller="repeatController">
  <div ng-repeat="img in images" >
    <img ng-src="{{ img }}">
  </div>
</div>