Issue
We have a manga reading website and we are trying to rebuild it with AngularJS Our Current Website with PHP. We had a lot of progress but stuck at here. At the main page, Naruto button "649" like current one. When we click this it has to load Naruto Chapter 649's images. But its loads blank page. Here is our code:
Our JSON:
[
{
"seri": "Bleach",
"random": [
{
"klasor": "787",
"yol": [
"path/to/1.jpg",
"path/to/2.jpg",
"path/to/3.jpg"
]
},
{
"klasor": "788",
"yol": [
"path/to/1.jpg",
"path/to/2.jpg",
"path/to/3.jpg"
]
}
]
},
{
"seri": "Naruto",
"random": [
{
"klasor": "332",
"yol": [
"path/to/1.jpg",
"path/to/2.jpg",
"path/to/3.jpg"
]
},
{
"klasor": "333",
"yol": [
"path/to/1.jpg",
"path/to/2.jpg",
"path/to/3.jpg"
]
}
]
}
]
Related App.js part:
$stateProvider
.state('oku', {
url: "/oku/:name/:id",
views: {
"viewC": { templateUrl: "oku.html",
controller: "nbgCtrl",},
},
})
.factory('MangaService', function($http) {
var mService = {};
var url = '/uzak/remote1.php?callback=JSON_CALLBACK';
mService.allMangas = $http.get(url);
// retrieve your full JSON into mService.allMangas here
// you could additionally track states like loading/error
mService.getMangaSeri = function(name) {
return mService.allMangas.filter(function (el) {
return el.seri == name;
})[0];
}
mService.getMangaSeriKlasor = function(name, num) {
var seri = mService.getMangaSeri(name);
return seri.random.filter(function (el) {
return el.klasor == num;
})[0];
}
return mService;
})
.controller('nbgCtrl', function($scope, MangaService) {
MangaService.allMangas.success(function(verHemen){
$scope.bilgiler = verHemen;
})
})
Naruto 649 button, link is like "oku/Naruto/649", loads the oku.html and "manga" is coming from another JSON.
<a ui-sref="oku({id:manga.last, name:manga.name})" class="waves-effect waves-light btn">{{manga.last}}</a>
Related oku.html part, oku.html is where is images are displaying:
<div class="col s8 offset-s2" ng-repeat="bilgi in bilgiler.random">
<img ng-repeat="mypath in bilgi.yol" ng-src="http://localhost/{{mypath}}">
</div>
So our problem is just how do we display that images using angularJS?
Solution
Looks like {{bilgi.yol}}
would actually be an array, and you are using that in your ng-src attribute.
Not exactly sure what you want to achieve, but maybe something like this:
<div ng-repeat="bilgi in bilgiler.random">
<img ng-repeat="mypath in bilgi.yol" ng-src="http://localhost/{{mypath}}">
</div>
That would display all images referenced in the respective bilgi.yol array.
What you are probably after is filtering your JSON by "seri" first, then filter the "random" from that result by "klasor", and then you have the manga chapter you want to display. Say you store this in myManga, you could simply do this:
<img ng-repeat="myPath in myManga.yol" ng-src="http://localhost/{{myPath}}">
As for working with the full JSON, while it is a waste of bandwidth, you could fetch it once in a service, and use it like this:
.factory('MangaService', function($http) {
var mService = {};
mService.allMangas = [];
// retrieve your full JSON into mService.allMangas here
// you could additionally track states like loading/error
mService.getMangaSeri = function(name) {
return mService.allMangas.filter(function (el) {
return el.seri == name;
})[0];
}
mService.getMangaSeriKlasor = function(name, num) {
var seri = mService.getMangaSeri(name);
return seri.random.filter(function (el) {
return el.klasor == num;
})[0];
}
return mService;
})
You can use this service in your controllers, and request the specific manga series and chapter by using the lookup functions.
For what it's worth, I'd personally go with a more specific php api that allows for more fine-grained requests.
Answered By - bgse
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.