AngularJS漫画阅读网站

Question

我们有一个漫画阅读网站，我们正试图用AngularJS Our Current Website with PHP重建它。我们取得了很多进展，但仍停留在这里。在主页上，火影忍者按钮“649”像当前的一样。当我们点击它时，它必须加载火影忍者第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; 
}) 
}) 

火影忍者649按钮，链接就像是 “奥/火影忍者/ 649”，加载奥.html和“漫画”来自另一个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图像？

Answer 1

看起来像{{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允许更细粒度的请求。