Question

我想在AngularJS中实现一个带有Dropdown的库来选择一本书而不是本书的章节。选择章节后，将出现选择的章节文本。所有书籍都采用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;
  }
});
})

由于

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)"

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

1 个答案: