Ng-repeat images in folder

Question

I'm a beginner with Angular and I want to make a ng-repeat of images in a folder. All my images have different names so I don't see how I can make a ngSrc for all the images.

Hope I am clear enough.

Answer 1

You can try something like this.

Grab all the image filenames and store it in a javascript array with in the javascript for your controller. I'm assuming you would be doing this on your server side and return JSON back to client through an API or Service.

In you controller, the result would look like this.

$scope.myImages = ["image1.jpg", "image2.jpg"];

You have many options now. One way is to write a little function that returns the full path and call it from ng-src.

$scope.getImagePath = function(imageName) {
return "http://yoursite/location/" + imageName;
};

<div ng-repeat="myImage in myImages">

<img ng-src="{{getImagePath(myImage)}}"/>

</div>

Similar post here

Try to give some code snippets using JSFiddle or Plunker next time as it would clearly show what you are trying to do.

[Update]

I don't know what language/framework you are using on the server side but to get all the files in a directory is very easy. Below are examples using node.js and C# respectively.

http://www.csharp-examples.net/get-files-from-directory/

How do you get a list of the names of all files present in a directory in Node.js?

If you are using ASP.NET WEB API, then just return the array back from the Get method in your API Controller, and then call that API from Angular directly.

There are tons of examples on how to do this. Just do some research and you should be fine.