Question

我有一个三个选择菜单，它们根据来自我的控制器的JSON数据相互绑定。

<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。如果要选择值，请将绑定的变量设置为ng-model
将图像元素绑定到控制器

selPage

选择章节和页面索引而不是网址
添加了ng-click和next(manga, chapter, page) function
删除两名观察员

单击图像库设置下一步

1 个答案: