angleJSのJSON配列からデータを取り出す

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="imagePath in user.imagePath" ng-src="{{imagePath }}"> 

Answer 3

試し

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

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>