帶有過濾器的 Angular 1 ng-repeat 用於拆分同一 json 數組中的字符串值

Question

我使用 ng-repeat 附加 json 數組值，問題是圖片 URLS 對象具有圖像的字符串值，我正在尋找將圖片URLS 字符串值分開並顯示圖像

javascript

 var results= [
                {
                   "title": Album1,
                   "pictureURLS": "pirul.jpg,picurl2.jpg,picurl3.jpg",
                   "ApprovalStatus": "2",


                },
                {
                   "title": Album2,
                   "pictureURLS": "pirul.jpg,picurl2.jpg,picurl3.jpg",
                   "ApprovalStatus": "2",


                },
                {
                   "title": Album3,
                   "AlbumPictureURLS": null,
"ApprovalStatus": "2",

             ]

HTML

<div ng-repeat="photo in results">
<h4>{{photo.title}}</h4>
<img src="{{photo.pictureURLS}}" />
</div>

Answer 1

像這樣試試；

<img ng-repeat="url in photo.pictureURLS.split(',')" src="{{url}}" />

Answer 2

如果您可以修改對象，則可以通過添加如下所示的屬性使其包含 URL 作為數組

for(var i=0; i<results.length; i++){
    var pictureURLArray = results[i].pictureURLS.split(',');
    results[i].pictureURLArray = pictureURLArray;
}

然后你可以在 HTML 中再使用一個ng-repeat ：

<div ng-repeat="photo in results">
<h4>{{photo.title}}</h4>
<div ng-repeat="url in photo.pictureURLArray">
    <img src="{{url}}" />
</div>
</div>

Answer 3

你可以試試這個：

 <div ng-repeat="photo in results">
       <h4>{{photo.title}}</h4>
         <div ng-repeat="url in photo.pictureURLS.split(',')">
            <img ng-src="{{url}}" />
         </div>

    </div>

Answer 4

Correct JSON format to:

var results= 
           [{
               title: "Album1",
               pictureURLS: "pirul.jpg,picurl2.jpg,picurl3.jpg",
               ApprovalStatus: "2"
            },
            {
               title: "Album2",
               pictureURLS: "pirul.jpg,picurl2.jpg,picurl3.jpg",
               ApprovalStatus: "2"
            },
            {
               title: "Album3",
               AlbumPictureURLS: null
            }];

visit fiddle:  http://jsfiddle.net/Vwsej/1248/

Answer 5

使用以下代碼：

HTML：

<div ng-repeat="photo in results">
    <h4>{{photo.title}}</h4>
    <img ng-repeat="ph in photo.pictureURLS | filterPhoto" src="{{ph}}" />
</div>

JS：

myApp.filter('filterPhoto', function() {
    return function(x) {
        return x.split(',');
    };
});

希望這會奏效。