I am looking to develop a library in AngularJS that includes dropdown menus for selecting a book and then choosing a chapter from that book. Once a chapter is selected, the corresponding text should be displayed. All book data is available in a single JSON format. How can I implement a navigation link to move to the next chapter, as shown in the image located at the bottom left corner?
Image: First, select a book and then choose a chapter from the dropdown menu
// index.html
<div ng-controller="ArticlesCtrl">
<br/>
<div class="dropdown">
<form class="form" name="myForm">
<label for="mySelect">Select a Book:</label>
<select class="dropdown-select" name="mySelect" id="mySelect" ng-options="option.bname for option in articles" ng-model="articles.bname" ng-change="updateBook()"></select>
</form>
</div>
<div class="dropdown">
<form class="form" name="myForm" ng-show="chapters" class="ng-hide">
<label for="mySelect">Choose a chapter:</label>
<select class="dropdown-select" name="mySelect" id="chapter" ng-options="option.Icnumber for option in selected" ng-model="selected.Icnumber" ng-change="updateChapter()"></select>
</form>
</div>
<hr>
<p ng-repeat="paragraph in paragraphs track by paragraph.Ivnumber">{{paragraph.Ivnumber}} {{paragraph.Itext}}"</p>
<a>Next Chapter</a>
</div>
app.js
.controller('ArticlesCtrl', function($scope, $location, $http, Cart){
$scope.cart = Cart;
$http.get('lib.json').then(function(articlesResponse) {
$scope.articles = articlesResponse.data;
$scope.chapters = false;
$scope.paragraph = false;
$scope.show = false;
$scope.updateBook = function() {
var item = $scope.articles.bname.Ibnumber;
var indexItem = item - 1;
$scope.selected = articlesResponse.data[indexItem].CHAPTER;
$scope.chapters = true;
}
$scope.updateChapter = function() {
var item = $scope.articles.bname.Ibnumber;
var indexItem = item - 1;
var chapter = $scope.selected.Icnumber.Icnumber;
var indexChapter = chapter - 1;
$scope.paragraphs = articlesResponse.data[indexItem].CHAPTER[indexChapter].PARAGRAPH;
$scope.paragraph = true;
}
});
})
Thank you.