Question

从下面 JSON 我想从imagePath数组中检索所有图片。如果我尝试检索单个图像，则可以顺利获取。但是在获取imagePath数组时出现了困难。帮我解决这个问题。谢谢

1）。 JSON

  [{
   "senderName": "ABC",
   "text": "Enjoy",
   "imagePath": [
       "../img/jellyfish.jpg",
       "../img/cat.jpg",
       "../img/fatmice.jpg",
       "../img/duck.jpg",
       "../img/d.jpg"],
    "senderImage": "../img/abc.jpg"
  }, {
    "senderName": "XYZ",
    "text": "Enjoy",
    "imagePath": [
        "../img/jellyfish.jpg",
        "../img/cat.jpg",
        "../img/d.jpg"],
    "senderImage": "../img/abc.jpg"
  }, {
    "senderName": "PQR",
    "text": "Enjoy",
    "imagePath": [
        "../img/jellyfish.jpg",
        "../img/cat.jpg",
        "../img/d.jpg"],
    "senderImage": "../img/abc.jpg"
  }]

2）。这是上面JSON的controller.js文件

     http.get('../js/postData.json')
      .success(function (response) {
         $scope.data = response;
        console.log(response);        
      }).error(function (err) {
        console.log(err);
       })

3）。相应的HTML文件是：

   <div class="list" ng-repeat="user in data">
     <a class="item item-avatar">
     <img ng-src="{{user.senderImage}}" align="left">
     <h4 align="left">
         {{user.senderName}}
     </h4>
   </a>
   <p>
     {{user.text}}
    </p>
   <div>
    <img ng-src="{{user.imagePath}}">
   </div>
   </div>

Answer 1

<div class="list" ng-repeat="user in data">
     <a class="item item-avatar">
     <img ng-src="{{user.senderImage}}" align="left">
     <h4 align="left">
         {{user.senderName}}
     </h4>
   </a>
   <p>
     {{user.text}}
    </p>
   <div>
    <img ng-src="{{image}}" ng-repeat="image in user.imagePath">
   </div>
   </div>

Answer 2

如果要加载所有图像，请尝试此操作：

<img ng-repeat="singleImg in user.imagePath" ng-src="{{singleImg}}">

Answer 3

尝试使用嵌套循环

var count = 10;
var interval = 1000;
iterator();

function iterator() {
  document.getElementById("timer").innerHTML="Only " + count + " copies left! Hurry up!";
  document.getElementById("interval").innerHTML="Timeout Interval: " + interval + "ms";
  count -= 1;
  interval += 1000;
  if(count>0) {
    setTimeout(iterator, interval);
  }
}

Answer 4

试试这个

<div class="list" ng-repeat="user in data">
 <a class="item item-avatar">
 <img ng-src="{{user.senderImage}}" align="left">
 <h4 align="left">
     {{user.senderName}}
 </h4>
 </a>
 <p>
 {{user.text}}
</p>
<div>
    <!--Changes are made here-->
    <div ng-repeat="path in user.imagePath">
      <img ng-src="{{path}}">
    </div>
    <!--Changes ends here-->
 </div>
 </div>

从angularJS中的JSON数组中获取数据

4 个答案: