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

Question

我想在 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> 

应用程序.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;
  }
});
})

谢谢

Answer 1

你可以试试这个。使 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)"