ng-src funktioniert nicht richtig

Question

Ich baue eine mobile App mit Ionic-Framework 1 & AngularJS

I REST-Service Rückkehr JSON-Daten haben. Die Daten sind ein Fotoalbum, das aus einem Namen und einer Reihe von Bildern im Album besteht. Ich möchte gerne nested ng-repeat verwenden, um die Alben und ihre Fotos in einer Ansicht anzuzeigen.

Mein System Info:

$ ionic info 

Your system information: 

Cordova CLI: 6.2.0 
Gulp version: CLI version 3.9.1 
Gulp local: 
Ionic Framework Version: 1.2.4 
Ionic CLI Version: 1.7.16 
Ionic App Lib Version: 0.7.3 
OS: Distributor ID: LinuxMint Description: Linux Mint 17.1 Rebecca 
Node Version: v0.12.2 

Ansicht

<!-- ng-repeat photo albums --> 
    <div ng-repeat="album in albums" id="event-images"> 
     <div class="item item-divider"> 
      <i class="ion-images"></i> 
      {{ album.albumName }} 
     </div> 

     <a class="item item-list-detail"> 
      <ion-scroll direction="x"> 
       <img ng-repeat="image in album.images" ng-src="{{image.img-id}}" ng-click="showImages($index)" class="image-list-thumb"> 
      </ion-scroll> 
     </a> 
    </div> 

JSON

[ 

{ 
    "albumName": "Business School 2016", 

    "images": [{ 
      "img-id": 1, 
      "img-src": "http://www.freedigitalphotos.net/images/img/homepage/87357.jpg" 
     }, 

     { 
      "img-id": 2, 
      "img-src": "http://www.gettyimages.pt/gi-resources/images/Homepage/Hero/PT/PT_hero_42_153645159.jpg" 
     }, 

     { 
      "img-id": 3, 
      "img-src": "http://i.dailymail.co.uk/i/pix/2016/03/22/13/32738A6E00000578-3504412-image-a-6_1458654517341.jpg" 
     }, 

     { 
      "img-id": 4, 
      "img-src": "http://i.dailymail.co.uk/i/pix/2014/12/19/2429637D00000578-0-image-a-284_1419003100839.jpg" 
     } 
    ] 
}, 

{ 
    "albumName": "Summer School 2016", 

    "images": [{ 
      "img-id": 1, 
      "img-src": "http://nehandaradio.com/wp-content/uploads/2016/07/Evan-Mawarire-outside-Harare-Magistrates-Court.jpg" 
     }, 

     { 
      "img-id": 2, 
      "img-src": "http://resources0.news.com.au/images/2015/03/31/1227286/010588-3399e81e-d282-11e4-a5b4-b2d65ac8975a.jpg" 
     }, 

     { 
      "img-id": 3, 
      "img-src": "http://nehandaradio.com/wp-content/uploads/2016/07/riot-police-at-mawarire-court-hearing.jpg" 
     }, 

     { 
      "img-id": 4, 
      "img-src": "http://placehold.it/300x300" 
     } 
    ] 
} 

]

Ergebnis beim Fahren

So ng-repeat is correctly iterating over the 2 albums & 4 images in each but the images are not displaying, upon inspecting elements, ng-src="0"

So ng-Wiederholung ist aber die Bilder über die 2 Alben & 4 Bilder in jeder richtig iteriert werden nicht angezeigt, auf Elemente Inspektion ng-src =“ 0 ". Was passiert & Wie kann ich das beheben?

Answer 1

Ich denke, es sollte ng-src="{{image['img-src']}}" nicht ng-src="{{image.img-id}}" in Ihrem img Tag sein.

Sie haben eine falsche Eigenschaft übergeben, und wegen des Bindestrichs im Eigenschaftsnamen müssen Sie auch Klammernotation verwenden.