how to add multiple images at once using angularjs

Question

I am just beginner ,want to add images about 1000 from my folder but I tried many times but still not able to do so . i am using angularjs and able to show using $scope.image['image1.jpg','image2.jpg'] and can show it in ng-repeat so what can i do for 1000 images? will i load one by one??? please guide me if any better solution? i want to add folder like this

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

I am doing this:

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'
}, {
    ...
}];

Just preload your images take a look here: https://medium.com/@dabit3/easily-preload-images-in-your-angular-app-9659640efa74#.okcpfgsbh — Steeve Pitis, Mar 01 '17 at 16:05
Ok your question was not clear. In this case you have to request your server like : `GET /images`. And do the logic to read your folder on your server. — Steeve Pitis, Mar 01 '17 at 16:25
This question is unclear as written, and unanswerable as clarified in the comments. You **appear** to be asking how to get the filenames dynamically, which would be the responsibility of the server that is generating this JSON Data, not angular. It is impossible to tell you how to accomplish this from the information you have provided, and would be more answerable by tagging the question with the appropriate server technology. Please consider making an [edit] to your question. — Claies, Mar 01 '17 at 16:35
I think it might be possible in your case. if you can stick to a naming convention, like using ordered numbers. — alphapilgrim, Mar 01 '17 at 20:28
yes i did this by changing the name of images but its not a good approach because it effects images "alt" and "tittle" — Zeeshan, Mar 01 '17 at 20:44

score 0 · Answer 1 · edited May 23 '17 at 12:32

0

You can use the ng-repeat for an array in your $scope as follows, it this what you need ?

If you need to load the filenames first, you need to do it with a backend, because javascript is not allowed to check system information. But its very easy. Unfortunetly i dont know which backend you need, so take a look for these solutions:

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

edited May 23 '17 at 12:32

Community

1
1

answered Mar 01 '17 at 16:18

DomeTune

1,401
10
21

thank you for your reply but i did this already not can enter 1000 url's of images like this i need any quick solution – Zeeshan Mar 01 '17 at 16:22
can say i want to load images direct from my folder should not need to enter one by one url's – Zeeshan Mar 01 '17 at 16:25
Updated my answer. Unfortunetly javascript is not allowed to read your folder information. Therefor you need to add a backend solution with a "GET", that returns you all image-names, so you just load them and with ng-repeat over the result you have it. – DomeTune Mar 01 '17 at 16:27
how it will possible using server ? any example? – Zeeshan Mar 01 '17 at 16:31
can it possible using ajax?? – Zeeshan Mar 01 '17 at 16:32

score 0 · Answer 2 · answered Mar 01 '17 at 20:34

0

It might be worth trying if you have the ability to name your files with some sort of number ordered system. While this might now scale well, you could give it a try. Again it would depend on knowing the number of images and control over naming convention of photos.

var images = 1000;
var src = '../images/gallery/6th-september/2013-09-07-09-42-';
$scope.images = [];
for (var i = 0; i < images.length; i++) {
  $scope.images.push(src + images[i] + '.jpg');
}

answered Mar 01 '17 at 20:34

alphapilgrim

3,761
8
29
58

yes i did this by changing the name of images but its not a good approach because it effects images "alt" and "tittle" – Zeeshan Mar 01 '17 at 20:44
@Zeeshan you might consider using a json file as a constant, so you have access to all information. if you dont want to use a C or node solution. – alphapilgrim Mar 01 '17 at 20:52

how to add multiple images at once using angularjs

2 Answers2