使用 AngularJS 获取嵌套的 Json答案

【问题标题】：Get Nested Json With AngularJS使用 AngularJS 获取嵌套的 Json
【发布时间】：2015-10-03 22:21:46
【问题描述】：

我有这个 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();
})

模板.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>

【问题讨论】：

您希望客户端应用从哪里获取图像？

标签： javascript json angularjs mobile ionic

【解决方案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>

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

【讨论】：

【解决方案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>

【讨论】：