将三个选择菜单绑定在一起

时间:2015-10-15 07:22:18

标签: javascript angularjs

我在下面的链接中有JSON数据:

首选菜单属于系列。第二个选择菜单属于章节,第三个属于页面。当您将第一个选择菜单“火影忍者”更改为“海贼王”时,它会加载“海贼王”章节和“最后一件”章节。我怎样才能做到这一点?

<select class="browser-default" ng-model="myOption" ng-options="manga.seri for manga in bilgiler1">
    <option value="" disabled selected>Select a Manga</option>
    <option></option>
</select>
<select class="browser-default">
    <option value="" disabled selected>Chapter</option>
    <option></option>
</select>
<select class="browser-default">
    <option value="" disabled selected>Page</option>
    <option></option>
</select>
<img ng-repeat="" ng-src="/{{}}">

使用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) {
    MMG.adlar.success(function(loHemen) {
        $scope.bilgiler1 = loHemen;
    })
})

2 个答案:

答案 0 :(得分:2)

你需要控制器中的一些对象

selectedManga = {}; 
selectedChapter = {} 

然后将其添加到您的第一个选择

ng-options="manga.randomword as manga.seri for manga in bilgiler1" 
ng-model="selectedManga";
ng-change="selectedChapter = {}; // to reset the selected chapter if manga changes

在第二个选择中添加

ng-options="chapter.yol as chapter.klasor for chapter in selectedManga"
ng-model="selectedChapter"

在selectedChapter中,您拥有包含图像的数组,并可以在第三个选择框中显示它们等等

答案 1 :(得分:1)

你可以保存每个漫画对象保存其章节的所有漫画的数组,每章保持其页数。

然后使用ng-repeat像现在一样浏览漫画,然后浏览所选漫画的章节,然后浏览所选章节的页面。

这是概念的工作this answer