Manga example

by javiros

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
    <select class="browser-default" ng-model="selManga" ng-options="manga.title for manga in mangas">
        
    </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 class="picture" ng-src="{{selManga.chapters[selChapter].pages[selPage]}}" ng-click="next(selManga, selChapter, selPage)">
</div>

CSS

.picture {
    cursor: pointer;
}

JavaScript

var myApp = angular.module('myApp', []);

myApp.controller('MyCtrl', function ($scope) {
    $scope.next = function (manga, chapter, page) {
        var nextPage = page + 1;
        if (angular.isDefined(manga.chapters[chapter].pages[nextPage])) {
            $scope.selPage = nextPage;
        } else if (angular.isDefined(manga.chapters[chapter + 1])) {
            $scope.selChapter = chapter + 1;
            $scope.selPage = 0;
        }
    }


    $scope.mangas = [{
        title: 'Manga #1',
        chapters: [{
            title: 'Chapter #11',
            pages: [
                "http://i.imgur.com/bwy74ok.jpg",
                "http://i.imgur.com/bAZWoqx.jpg",
                "http://i.imgur.com/bwy74ok.jpg",
                "http://i.imgur.com/bAZWoqx.jpg", ]
        }, {
            title: 'Chapter #12',
            pages: [
                "http://i.imgur.com/PgmEBSB.jpg",
                "http://i.imgur.com/aboaFoB.jpg",
                "http://i.imgur.com/PgmEBSB.jpg",
                "http://i.imgur.com/aboaFoB.jpg", ]
        }]
    }, {
        title: 'Manga #2',
        chapters: [{
            title: 'Chapter #21',
            pages: [
                "http://i.imgur.com/LkmcILl.jpg",
                "http://i.imgur.com/q9zO6tw.jpg",
                "http://i.imgur.com/LkmcILl.jpg",
                "http://i.imgur.com/q9zO6tw.jpg", ]
        }, {
            title: 'Chapter #22',
            pages: [
                "http://i.imgur.com/PgmEBSB.jpg",
                "http://i.imgur.com/aboaFoB.jpg",
                "http://i.imgur.com/PgmEBSB.jpg",
                "http://i.imgur.com/aboaFoB.jpg", ]
        }]
    }];
    $scope.selManga = $scope.mangas[0]
});