Angular 1 ng-repeat with filter 用于拆分同一 json 数组中的字符串值

Question

我使用 ng-repeat 附加 json 数组值，问题是 pictureURLS 对象具有图像的字符串值，我正在寻找的图像将 pictureURLS 字符串值分开并显示图像

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(',');
    };
});

希望这会奏效。

Angular 1 ng-repeat with filter 用于拆分同一 json 数组中的字符串值

Angular 1 ng-repeat with filter for split the string values within same json array

javascript

split

angularjs

angularjs-ng-repeat