使用AngularJS获取嵌套Json

Question

我有这个json。如何在angularjs中显示img/n.jpg？我下面有多张照片。

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。

前任：

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>

普伦克：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>