У меня есть сайт для чтения манги, и я пытаюсь перестроить с помощью AngularJS.
Вот данные 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"
]
}
]
}
]
Я хочу отображать эти изображения последовательно. Вот так. Но в этом текущем коде ничего не отображается.
Связанная сторона 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;
})
})
Для повторения вам нужно использовать некоторую форму обертки. Например:
<div ng-repeat="bilgi in bilgiler.random">
<img ng-src="{{bilgi.Paths}}" />
</div>
Вы также можете использовать теги span, li и т.д. Дополнительные данные о ng-повторах можно найти здесь: https://docs.angularjs.org/api/ng/directive/ngRepeat
<span ng-repeat="bilgi in bilgiler.random"><img ng-repeat="img in bilgi.Paths" ng-src="http://localhost/{{img}}"></span>