Get Nested Json With AngularJS

Question

У меня есть этот json. Как отобразить img/n.jpg в angularjs? У меня есть несколько изображений.

bb.json

{ 
    "bb": [ 
{ 
    "chapter": "1", 
    "images": ["img/1.JPG", "img/2.jpg"] 
},{ 
    "chapter": "2", 
    "images": ["img/2.jpg", "img/3.jpg"] 
},{ 
    "chapter": "3", 
    "images": ["img/3.jpg", "img/4.jpg"] 
} 
    ] 
} 

app.js

$http.get('js/bb.json').success(function(data){ 

    $scope.images = data.bb; 
    $ionicSlideBoxDelegate.$getByHandle('image-viewer').update(); 
}) 

templates.html

<ion-slide-box pager-click="navSlide(index)" delegate-handle="image-viewer" show-pager='true' does-continue="true" on-slide-changed="slideHasChanged($index)"> 
      <ion-slide ng-repeat="slide in images.image" > 
       <div style="background: url({{slide.images}}) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height: 100%; width: 100%;"></div> 
      </ion-slide> 
     </ion-slide-box> 

Answer 1

Вы должны перебирать массив изображений и нажмите каждое изображение, чтобы вновь созданный массив, который связан с вашим $scope.

Для Ex:

angular.module('fiddle', []) 

.controller('MainCtrl', function ($scope) { 

    var json = { 
     "bb": [ 
      { 
       "chapter": "1", 
       "images": ["img/1.JPG", "img/2.jpg"] 
      }, { 
       "chapter": "2", 
       "images": ["img/2.jpg", "img/3.jpg"] 
      }, { 
       "chapter": "3", 
       "images": ["img/3.jpg", "img/4.jpg"] 
      } 
     ] 
    }; 

    $scope.imagesArray = []; 

    json.bb.forEach(function (item) { 
     item.images.forEach(function (image) { 
      $scope.imagesArray.push({ 
       src: image 
      }); 
     }); 
    }) 

}); 

И в шаблоне (очевидно, вы бы не использовать <p>):

<p ng-repeat="image in imagesArray">{{ image.src }}</p> 

Plunk: http://plnkr.co/edit/Nf1wNF6M8RB2TvgkpgXe?p=preview

Answer 2

следует использовать директиву ng-style применить фоновое изображение.

<div ng-style="{'background': 'url({{slide.images}}) no-repeat center center fixed', '-webkit-background-size': 'cover', '-moz-background-size': 'cover', '-o-background-size': 'cover', 'background-size': 'cover', 'height': '100%', 'width': '100%'}"></div>