2015-10-05 98 views
0

我有一個漫畫閱讀網站,我試圖用AngularJS重建。AngularJS ng-repeat嵌套JSON數據

這裏是JSON數據:

[ 
    { 
    "name": "Bleach", 
    "random": [ 
     { 
      "chapter": "787", 
      "Paths": [ 
       "path/to/1.jpg", 
       "path/to/2.jpg", 
       "path/to/3.jpg" 
      ] 
     }, 
     { 
      "chapter": "788", 
      "Paths": [ 
       "path/to/1.jpg", 
       "path/to/2.jpg", 
       "path/to/3.jpg" 
      ] 
     } 
    ] 
    }, 
    { 
    "name": "Naruto", 
    "random": [ 
     { 
      "chapter": "332", 
      "Paths": [ 
       "path/to/1.jpg", 
       "path/to/2.jpg", 
       "path/to/3.jpg" 
      ] 
     }, 
     { 
      "chapter": "333", 
      "Paths": [ 
       "path/to/1.jpg", 
       "path/to/2.jpg", 
       "path/to/3.jpg" 
      ] 
     } 
    ] 
    } 
] 

欲順序顯示這些圖像。 Like this。但是在這個當前的代碼中沒有顯示。

相關oku.html部分:

<img ng-repeat="bilgi in bilgiler.random" ng-src="http://localhost/{{bilgi.paths}}"> 

App.js:

$stateProvider 
.state('oku', { 
url: "/oku/:name/:id", 
views: { 
"viewC": { templateUrl: "oku.html", 
      controller: "nbgCtrl",}, 
}, 
    resolve: { 
    alData : function(NBG, $stateParams, $filter){ 
     return NBG.adlar.then(function(res){ 
      return $filter('filter')(res.data, {chapter: $stateParams.id}, true)[0]; 
     }); 
    } 
    } 
}) 

.controller('nbgCtrl', function($scope, alData, NBG) { 
$scope.images = alData; 
NBG.adlar.success(function(verHemen){ 
    $scope.bilgiler = verHemen; 
}) 
}) 
+0

使用本: '' – Sandeep

+0

請格式化您的代碼。 –

回答

1

您需要使用某種形式的包裝,爲您的重複。例如:

<div ng-repeat="bilgi in bilgiler.random"> 
    <img ng-src="{{bilgi.Paths}}" /> 
</div> 

您還可以使用跨度,李標籤等,都可以在這裏找到了NG-重複更多的數據:https://docs.angularjs.org/api/ng/directive/ngRepeat