Использование свойства JSON в Angular Js для разделения свойства «Images» с помощью метода split ()

Question

var app= angular.module("myApp",[])
app.controller("ajaxCtrl", function($scope,$http)
{      
    $scope.customer=[];
    $http.get("sampledata.json").then(function(response)
    {
        $scope.customer=response.data;
    });
});

/ sample.json /

 {
      "ProductDetails":[
      {
    "Images":     "us87_cream_mel_1.jpg|us87_cream_mel_2.jpg|us87_cream_mel_3.jpg|us87_cream_mel_4.jpg|us87_cream_mel_5.jpg",
    "ListImagePath": "https://Static05.Jockeyindia.com/uploads/dealimages/7026/listimages/",

       },
     {
    "Images": "navy-modern-brief-8044-1.jpg|8044_navy_2.jpg|8044_navy_3.jpg|8044_navy_4.jpg|navy-modern-brief-8044-2.jpg",
    "ListImagePath": "https://Static05.Jockeyindia.com/uploads/dealimages/6830/listimages/",
     }, 
   {
    "Images": "dark-assorted-checks-boxer-shorts-pack-of-2-1222-11.jpg|dark-assorted-checks-boxer-shorts-pack-of-2-1222-10.jpg|dark-assorted-checks-boxer-shorts-pack-of-2-1222-9.jpg|dark-assorted-checks-boxer-shorts-pack-of-2-1222-8.jpg|dark-assorted-checks-boxer-shorts-pack-of-2-1222-7.jpg|dark-assorted-checks-boxer-shorts-pack-of-2-1222-6.jpg|dark-assorted-checks-boxer-shorts-pack-of-2-1222-5.jpg|dark-assorted-checks-boxer-shorts-pack-of-2-1222-4.jpg|dark-assorted-checks-boxer-shorts-pack-of-2-1222-3.jpg|dark-assorted-checks-boxer-shorts-pack-of-2-1222-2.jpg|dark-assorted-checks-boxer-shorts-pack-of-2-1222-1.jpg",

    "ListImagePath": "https://Static05.Jockeyindia.com/uploads/dealimages/5993/listimages/"
     },
    ]
    }

Я хочу разделить свойство «Images» и использовать его с «ListImagePath» в директиве ng-repeat.Как разбить его и объединить для отображения?

Answer 1

Примерно так должно работать.

var app = angular.module("myApp", [])
app.controller("ajaxCtrl", function($scope, $http) {
    $scope.customer = [];
    $scope.images = [];

    $http.get("sampledata.json").then(function(response) {
        $scope.customer = response.data;
        if (response.data && angular.isArray(response.data.ProductDetails)) {
            angular.forEach(response.data.ProductDetails, function(item) {
                var images = item.images.split('|');

                angular.forEach(images, function(image) {
                    $scope.images.push(item.ListImagePath + image)
                })
            });
        }
    });
});

$scope.images теперь будет массивом ссылок src изображений.

[Update 2]

var app = angular.module("myApp", [])
app.controller("ajaxCtrl", function($scope, $http) {
    $scope.customer = [];

    $http.get("sampledata.json").then(function(response) {
        $scope.customer = response.data;
        if (response.data && angular.isArray(response.data.ProductDetails)) {
            angular.forEach(response.data.ProductDetails, function(item) {
                var images = item.Images.split('|'),
                    images2 = [];

                angular.forEach(images, function(image) {
                    images2.push(item.ListImagePath + image)
                });
                item.Images = images2;
            });
        }
    });
});