javascript - 单击AngularJS的链接，浏览JSON模型

我想用下拉列表在AngularJS中实现一个库来选择一本书，而不是本书的章节。选定章节后，将显示所选的章节文本。所有书籍均采用一种JSON格式。如何使用左下角的链接导航到下一章(见图)？

Picture: First i choose a Book and than the chapter dropdown appears

// index.html
<div ng-controller="ArticlesCtrl">
   <br/>
   <div class="dropdown">
      <form class="form" name="myForm">
         <label for="mySelect">Choose 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;
  }
});
})

谢谢

最佳答案

您可以尝试一下。
使updateChapter函数通用。

<a ng-click="updateChapter(selected.Icnumber + 1)">Next Chapter</a>

相应地更改updateChapter函数

$scope.updateChapter = function(chapter) {
    var Item = $scope.articles.bname.Ibnumber;
    var indexItem = Item - 1;
    //update the select menu
    $scope.selected.Icnumber = chapter;
    var indexChapter = chapter - 1;
    $scope.paragraphs = articlesResponse.data[indexItem].CHAPTER[indexChapter].PARAGRAPH;
    $scope.paragraph = true;
}

和ng-change="updateChapter()"到ng-change=updateChapter(selected.Icnumber)"

关于javascript - 单击AngularJS的链接，浏览JSON模型，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36572676/