2017-04-08 37 views
1

我有一些JSON數據加載到列表中,該列表在所述數據中包含子列表。 JSON數據是從API使用GET調用ng-repeat在另一個ng-repeat中

 "pet": [ 
 
     { 
 
      "options": { 
 
      "option": [ 
 
       { 
 
       "$t": "hasShots" 
 
       }, 
 
       { 
 
       "$t": "altered" 
 
       }, 
 
       { 
 
       "$t": "housetrained" 
 
       } 
 
      ] 
 
      }, 
 
      "status": { 
 
      "$t": "A" 
 
      }, 
 
      "contact": { 
 
      "phone": { 
 
       "$t": "emails only please" 
 
      }, 
 
      "state": { 
 
       "$t": "NC" 
 
      }, 
 
      "address2": { 
 
       
 
      }, 
 
      "email": { 
 
       "$t": "[email protected]" 
 
      }, 
 
      "city": { 
 
       "$t": "Charlotte" 
 
      }, 
 
      "zip": { 
 
       "$t": "28226" 
 
      }, 
 
      "fax": { 
 
       
 
      }, 
 
      "address1": { 
 
       
 
      } 
 
      }, 
 
      "age": { 
 
      "$t": "Senior" 
 
      }, 
 
      "size": { 
 
      "$t": "M" 
 
      }, 
 
      "media": { 
 
      "photos": { 
 
       "photo": [ 
 
       { 
 
        "@size": "pnt", 
 
        "$t": "http:\/\/photos.petfinder.com\/photos\/pets\/36298811\/1\/?bust=1475677088&width=60&-pnt.jpg", 
 
        "@id": "1" 
 
       }, 
 
       { 
 
        "@size": "fpm", 
 
        "$t": "http:\/\/photos.petfinder.com\/photos\/pets\/36298811\/1\/?bust=1475677088&width=95&-fpm.jpg", 
 
        "@id": "1" 
 
       }, 
 
       { 
 
        "@size": "x", 
 
        "$t": "http:\/\/photos.petfinder.com\/photos\/pets\/36298811\/1\/?bust=1475677088&width=500&-x.jpg", 
 
        "@id": "1" 
 
       }, 
 
       { 
 
        "@size": "pn", 
 
        "$t": "http:\/\/photos.petfinder.com\/photos\/pets\/36298811\/1\/?bust=1475677088&width=300&-pn.jpg", 
 
        "@id": "1" 
 
       }, 
 
       { 
 
        "@size": "t", 
 
        "$t": "http:\/\/photos.petfinder.com\/photos\/pets\/36298811\/1\/?bust=1475677088&width=50&-t.jpg", 
 
        "@id": "1" 
 
       }, 
 
       { 
 
        "@size": "pnt", 
 
        "$t": "http:\/\/photos.petfinder.com\/photos\/pets\/36298811\/2\/?bust=1475677088&width=60&-pnt.jpg", 
 
        "@id": "2" 
 
       }, 
 
       { 
 
        "@size": "fpm", 
 
        "$t": "http:\/\/photos.petfinder.com\/photos\/pets\/36298811\/2\/?bust=1475677088&width=95&-fpm.jpg", 
 
        "@id": "2" 
 
       }, 
 
       { 
 
        "@size": "x", 
 
        "$t": "http:\/\/photos.petfinder.com\/photos\/pets\/36298811\/2\/?bust=1475677088&width=500&-x.jpg", 
 
        "@id": "2" 
 
       }, 
 
       { 
 
        "@size": "pn", 
 
        "$t": "http:\/\/photos.petfinder.com\/photos\/pets\/36298811\/2\/?bust=1475677088&width=300&-pn.jpg", 
 
        "@id": "2" 
 
       }, 
 
       { 
 
        "@size": "t", 
 
        "$t": "http:\/\/photos.petfinder.com\/photos\/pets\/36298811\/2\/?bust=1475677088&width=50&-t.jpg", 
 
        "@id": "2" 
 
       }, 
 
       { 
 
        "@size": "pnt", 
 
        "$t": "http:\/\/photos.petfinder.com\/photos\/pets\/36298811\/3\/?bust=1475677088&width=60&-pnt.jpg", 
 
        "@id": "3" 
 
       }, 
 
       { 
 
        "@size": "fpm", 
 
        "$t": "http:\/\/photos.petfinder.com\/photos\/pets\/36298811\/3\/?bust=1475677088&width=95&-fpm.jpg", 
 
        "@id": "3" 
 
       }, 
 
       { 
 
        "@size": "x", 
 
        "$t": "http:\/\/photos.petfinder.com\/photos\/pets\/36298811\/3\/?bust=1475677088&width=500&-x.jpg", 
 
        "@id": "3" 
 
       }, 
 
       { 
 
        "@size": "pn", 
 
        "$t": "http:\/\/photos.petfinder.com\/photos\/pets\/36298811\/3\/?bust=1475677088&width=300&-pn.jpg", 
 
        "@id": "3" 
 
       }, 
 
       { 
 
        "@size": "t", 
 
        "$t": "http:\/\/photos.petfinder.com\/photos\/pets\/36298811\/3\/?bust=1475677088&width=50&-t.jpg", 
 
        "@id": "3" 
 
       } 
 
       ] 
 
      } 
 
      }, 
 
      "id": { 
 
      "$t": "36298811" 
 
      }, 
 
      "shelterPetId": { 
 
      "$t": "Domino" 
 
      }, 
 
      "breeds": { 
 
      "breed": { 
 
       "$t": "Domestic Medium Hair" 
 
      } 
 
      }, 
 
      "name": { 
 
      "$t": "Domino" 
 
      }, 
 
      "sex": { 
 
      "$t": "M" 
 
      }, 
 
      "description": { 
 
      "$t": "Domino is a sweet, talkative kitty with lots of purr-sonality. He never meets a stranger, and will let children carry him around in their arms. \nHe has tested positive for FIV, but we have had him in our rescue since 2009, and he has never had any health problems at all. He is neutered and up to date on vaccinations.We think he was born around 2005-2006. Must be an indoor only cat. He has had regular dental cleanings; last one was April of 2015. He would make a great companion for anyone who wants an affectionate kitty to love and care for." 
 
      }, 
 
      "mix": { 
 
      "$t": "no" 
 
      }, 
 
      "shelterId": { 
 
      "$t": "NC773" 
 
      }, 
 
      "lastUpdate": { 
 
      "$t": "2017-03-15T12:37:11Z" 
 
      }, 
 
      "animal": { 
 
      "$t": "Cat" 
 
      } 
 
     }   
 
     ] 
 

拉,我的代碼是

<ol><li ng-repeat="pet in pets | orderBy: 'name.$t'"> 
 
<div>{{pet.name.$t}} - {{pet.animal.$t}}</div> 
 
<div ng-repeat="pic in pet.photo">{{pic.$t}}</div> 
 
</li> 
 
<ul></ul> 
 
</ol>

和寵物=上面的JSON數據。第一個ng-repeat工作正常,第二個嵌套在第一個中並沒有。最初我把它放在一個img標籤中作爲ng-src,我認爲它與$ sce源保護有關,但是這也不起作用,或者看起來不是這樣。

+0

你能更精確嗎?你的意思是「不起作用」?你嘗試了什麼?你現在的結果是什麼?你期待的結果是什麼? – Sorikairo

+0

我只是測試,看看我能否正確返回照片列表。最終我會有一個可以瀏覽的畫廊,但我意識到我已經混淆了我的陣列。 – Walt

回答

2

你是缺少媒體類型

<ol><li ng-repeat="pet in pets | orderBy: 'name.$t'"> 
<div>{{pet.name.$t}} - {{pet.animal.$t}}</div> 
<div ng-repeat="pic in pet.media.photos.photo">{{pic.$t}}</div> 
</li> 
<ul></ul> 
</ol> 
+0

謝謝,我喜歡這樣,但我也注意到我把它當作了pet.media.photos,它需要是pet.media.photos.photo。我是個白癡 – Walt