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允許更細粒度的請求。