javascript - AngularJS漫画阅读网站

我们有一个漫画阅读网站，我们正在尝试使用AngularJS Our Current Website with PHP对其进行重建。我们取得了很大进展，但仍停留在这里。在主页上，火影忍者按钮“ 649”与当前的一样。当我们单击此按钮时，它必须加载Naruto Chapter 649的图像。但是它加载空白页。这是我们的代码：

我们的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"
        ]
    }
]
}
]

相关的App.js部分：

$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按钮，链接类似于“ oku / Naruto / 649”，加载oku.html，“ manga”来自另一个JSON。

<a ui-sref="oku({id:manga.last, name:manga.name})" class="waves-effect waves-light btn">{{manga.last}}</a>

相关的oku.html部分，oku.html是显示图像的位置：

<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>

因此，我们的问题就是我们如何使用angularJS显示图像？

最佳答案

看起来{{bilgi.yol}}实际上是一个数组，并且您正在ng-src属性中使用它。

不确定要实现的目标，但可能是这样的：

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

那将显示在相应的bilgi.yol数组中引用的所有图像。

您可能要做的是先通过“ seri”过滤JSON，然后通过“ klasor”从结果中过滤“ random”，然后有了要显示的漫画章节。假设您将其存储在myManga中，则只需执行以下操作：

<img ng-repeat="myPath in myManga.yol" ng-src="http://localhost/{{myPath}}">

至于使用完整的JSON，虽然浪费带宽，但是您可以在服务中获取一次，并按以下方式使用它：

.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;
})

您可以在控制器中使用此服务，并通过使用查找功能来请求特定的漫画系列和章节。

对于它的价值，我个人会使用一个更特定的php API，该API允许进行更细粒度的请求。

关于javascript - AngularJS漫画阅读网站，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32956452/