使用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

您應該遍歷images數組，並將每個圖像推到一個新創建的數組，該數組綁定到$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>