Hey there! Let's work through this problem together. Your goal is to split the pipe-separated Images string from your JSON data, combine each image filename with the corresponding ListImagePath, then display all the full image URLs using AngularJS's ng-repeat. Here are two solid approaches to get this done:

Approach 1: Preprocess Data in the Controller #

This method cleans up your data as soon as it's fetched, making your template simpler and easier to read.

Step 1: Update the Controller #

First, fix the initial data fetch to target the ProductDetails array (since that's where your product data lives in the JSON). Then, iterate over each product to split the Images string and build full image URLs:

var app = angular.module("myApp", []);

app.controller("ajaxCtrl", function($scope, $http) {
  $scope.products = [];

  $http.get("sampledata.json").then(function(response) {
    // Grab the actual product array from the JSON response
    $scope.products = response.data.ProductDetails;

    // Process each product to create full image URLs
    $scope.products.forEach(function(product) {
      // Split the pipe-separated image filenames into an array
      const imageFilenames = product.Images.split('|');
      // Combine each filename with the base path to get full URLs
      product.fullImageUrls = imageFilenames.map(filename => product.ListImagePath + filename);
    });
  });
});

Step 2: Build the HTML Template #

Now you can easily loop through the preprocessed fullImageUrls array in your template using ng-repeat. Use ng-src instead of src to avoid browser errors while AngularJS parses the expression:

<div ng-app="myApp" ng-controller="ajaxCtrl">
  <!-- Loop through each product -->
  <div ng-repeat="product in products" class="product-container">
    <h4>Product Images</h4>
    <!-- Loop through each full image URL for the current product -->
    <img 
      ng-repeat="imgUrl in product.fullImageUrls" 
      ng-src="{{imgUrl}}" 
      alt="Product image"
      class="product-image"
    >
  </div>
</div>

Approach 2: Use a Custom Filter (For Reusability) #

If you need to reuse this image processing logic across multiple parts of your app, a custom AngularJS filter is the way to go—it keeps your controller lean and your logic modular.

Step 1: Create the Filter #

Add this filter to your app to handle splitting the string and combining it with the base path:

var app = angular.module("myApp", []);

app.filter('splitAndCombineImages', function() {
  return function(imagesString, basePath) {
    // Guard clause for invalid data to prevent errors
    if (!imagesString || !basePath) return [];
    // Split and combine filenames with base path in one step
    return imagesString.split('|').map(filename => basePath + filename);
  };
});

// Keep your controller simple - no preprocessing needed!
app.controller("ajaxCtrl", function($scope, $http) {
  $scope.products = [];

  $http.get("sampledata.json").then(function(response) {
    $scope.products = response.data.ProductDetails;
  });
});

Step 2: Use the Filter in the Template #

Call the filter directly in your ng-repeat to generate the full image URLs on the fly:

<div ng-app="myApp" ng-controller="ajaxCtrl">
  <div ng-repeat="product in products" class="product-container">
    <h4>Product Images</h4>
    <img 
      ng-repeat="imgUrl in (product.Images | splitAndCombineImages:product.ListImagePath)" 
      ng-src="{{imgUrl}}" 
      alt="Product image"
      class="product-image"
    >
  </div>
</div>

Key Notes #

• Why ng-src? Using src="{{imgUrl}}" would cause the browser to try loading the literal string {{imgUrl}} before AngularJS replaces it, leading to unnecessary 404 errors. ng-src waits until the expression is resolved to load the image.
• Edge Case Handling: Both approaches include checks to handle empty or missing data (like if Images or ListImagePath is undefined), so your app won't break unexpectedly.

内容的提问来源于stack exchange，提问作者Virendra Pandey