javascript - 接下来点击图片库设置

Question

我有一个三个选择菜单，它们根据来 self 的 Controller 的 JSON 数据相互绑定(bind)。

<select class="browser-default" ng-model="selManga" ng-options="manga.seri for manga in mangas">
    <option value="" disabled selected>Select a Manga</option>
    <option></option>
</select>
<select class="browser-default" ng-model="selChapter" ng-options="chapter.klasor for chapter in selManga.randomword">
    <option value="" disabled selected>Chapter</option>
    <option></option>
</select>
<select class="browser-default" ng-model="selPage">
    <option value="" disabled selected>Page</option>
    <option ng-repeat="page in selChapter.yol" value="{{page}}">{{$index+1}}</option>
</select>

<a><img ng-src="/{{selPage}}"></a>

Javascript:

.factory('MMG', function($http){
 var fveg= {};
 var url = 'http://api.mangayurdu.com/manga?callback=JSON_CALLBACK';
 fveg.adlar = $http.jsonp(url);
 return fveg;
 })

.controller('nbgCtrl',function  ($scope, MMG, $stateParams) {

    MMG.adlar.success(function(loHemen) {
    $scope.mangas = loHemen;
});

现在我想要的是，当您单击打开的图像时，它必须加载下一张图像等等。如果可能的话，当您点击第 788 章的最后一张图片时，它必须加载第 789 章。我该如何实现？

这是我的 jsfiddle:https://jsfiddle.net/Nasuh/zn85oonk/5/

Answer 1

参见 fiddle

<select class="browser-default" ng-model="selManga" ng-options="manga.title for manga in mangas">
    <option value="">Select a Manga</option>
</select>
<select ng-show="selManga" class="browser-default" ng-model="selChapter" ng-options="+idx as chapter.title for (idx, chapter) in selManga.chapters">
    <option value="">Chapter</option>
</select>
<select ng-show="selManga.chapters[selChapter].pages" class="browser-default" ng-model="selPage" ng-options="+idx as (+idx + 1) for (idx, page) in selManga.chapters[selChapter].pages">
    <option value="">Page</option>
</select>
<img ng-src="{{selManga.chapters[selChapter].pages[selPage]}}" ng-click="next(selManga, selChapter, selPage)">

对您所做的更改:

• 已删除空 <option></option>
• 已删除 disabled selected .如果要选择一个值，请将绑定(bind)的变量设置为 ng-model
• 移动了绑定(bind)到 selPage 的图像元素在 Controller 下
• 选择章节和页面索引而不是 url
• 已添加 ng-click和一个 next(manga, chapter, page) function
• 移除两个观察者