使用 Angular Js 中的 JSON 属性使用 split() 方法拆分“Images”属性

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”属性并将其与 ng-repeat 指令中的“ListImagePath”一起使用。如何拆分并拼接显示？

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 链接数组。

[更新 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;
            });
        }
    });
});