文件夾中的Ng重複圖像

Question

我是Angular的初學者，我想對文件夾中的圖像進行重複操作。我的所有圖像都有不同的名稱，所以我不知道如何爲所有圖像製作ngSrc。

希望我很清楚。

Answer 1

你可以嘗試這樣的事情。

抓住所有的圖像文件名，並將其存儲在一個JavaScript數組與JavaScript中爲您的控制器。我假設你將在服務器端執行此操作，並通過API或服務將JSON返回給客戶端。

在你的控制器中，結果看起來像這樣。

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

您現在有很多選擇。一種方法是編寫一個返回完整路徑的小函數，並從ng-src中調用它。

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

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

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

</div> 

類似的帖子here

嘗試給某些代碼段使用的jsfiddle或Plunker下一次，因爲這將清楚地表明你正在嘗試做的。

[更新]

我不知道你正在使用服務器端的什麼語言/框架，但讓所有的目錄中的文件是很容易的。以下是分別使用node.js和C＃的示例。

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?

如果您使用的ASP.NET Web API，然後就返回數組從您的API控制器Get方法後面，然後直接調用API的角度。

有很多關於如何做到這一點的例子。只要做一些研究，你應該沒問題。