[英]AngularJS ng-repeat nested JSON data
I have a manga reading website and I trying to rebuild with AngularJS. 我有一个漫画阅读网站,我尝试使用AngularJS进行重建。
Here is JSON Data: 这是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"
]
}
]
}
]
I want to display these images sequentially. 我想顺序显示这些图像。 Like this . 这样 。 But in this current code nothing displayed. 但是在当前代码中什么也没显示。
Related oku.html part: 相关oku.html部分:
<img ng-repeat="bilgi in bilgiler.random" ng-src="http://localhost/{{bilgi.paths}}">
App.js: 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;
})
})
You need to use some form of wrapper for your repeat. 您需要使用某种形式的包装器进行重复。 For example: 例如:
<div ng-repeat="bilgi in bilgiler.random">
<img ng-src="{{bilgi.Paths}}" />
</div>
You can also use span, li tags etc. More data on ng-repeats can be found here: https://docs.angularjs.org/api/ng/directive/ngRepeat 您还可以使用span,li标签等。有关ng-repeats的更多数据可以在这里找到: https : //docs.angularjs.org/api/ng/directive/ngRepeat
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.