Javascript Angularjs ng对每个唯一ID重复

我是AngukarJS和ionic framework的新手，我正在尝试创建一个具有以下树结构的应用程序：

Home Tab (list of books) (templates/allbooks.html)
> unique book (book description and chapters) (templates/book-des.html)
>> unique chapter (templates/book-chapter.html)

以下是

books.js

.factory('Books', function() {

  // books data
  var books = [{
    id: 0,
    title: 'Sample Title',
    author: 'Sample Author',
    category: 'Horor, Fiction',
    cover: '/cover.jpeg',
    details: 'some details about the book',
    chapters: [
      {
        id : 1,
        name: 'Chapter 1',
        filename: 'chapter1.html',
      },
      {
        id : 2,
        name: 'Chapter 2',
        filename: 'Chapter2.html',
      }
    ]
  }
  .....


    return {
     ...
    // get the book ID
    get: function(bookId) {
      for (var i = 0; i < books.length; i++) {
        if (books[i].id === parseInt(bookId)) {
          return books[i];
        }
      }
      return null;
    },
    // get the chapter ID
    getChapter: function(chapterId){
      for(var j = 0; j < books.chapters.length; j++){
        return j;
      }
      return null;
    }
  };

....
.controller('BookDesCtrl', function($scope, $stateParams, Books) {
  $scope.book = Books.get($stateParams.bookId);
})
.controller('BookChapterCtrl', function($scope, $stateParams, Books) {
  $scope.book = Books.get($stateParams.bookId);
  // this returns error for getting chapter ID
  $scope.chapter = Books.getChapter($stateParams.chapterId);
})
.....

在

templates/allbooks.html

中，我有以下

ng repeat

<div ng-repeat="book in books">
  <p>{{book.title}}</p>
  <p>{{book.author}}</p>
  <p>{{book.category}}</p>
</div>

<div class="book-title">
   <p>{{book.title}}</p>
</div>
....
<div ng-repeat="chapter in book.chapters">
      <ion-item href="#/tab/books/chapter/{{book.id}}/{{chapter.id}}">
        <p>{{chapter.name}}</p>
      </ion-item>
</div>

获取“当前”书名并列出所有章节。 到目前为止一切都很好

但是在

模板/book chapter.html

中，我希望能够显示与特定章节相关的内容

我尝试使用

ng repeat=“book.chapters.id中的chapter”

，但它不起作用

主要问题在这里：

在

模板/book chapter.html

模板中：

<div ng-repeat="chapter in book.chapters.id">
      <ion-item class="item item-text-wrap">
      <p><div ng-include="'{{chapter.filename}}'"></div></p>
      </ion-item>
      <p> chapter ID is {{chapter.id}} </p>
</div>

章节ID为{{chapter.ID}

如何使用该模板中的

ng repeate

提取与该独特章节相关的信息

模板更新

  <ion-item class="item item-text-wrap">
  <p><div ng-include="'{{chapter.filename}}'"></div></p>
  </ion-item>
  <p> chapter ID is {{chapter.id}} </p>

更新你的app.js

getChapter: function(book, chapterId) {
  for (var i = 0; i < book.chapters.length; i++) {
    if (book.chapters[i].id === parseInt(chapterId)) {
      return book.chapters[i];
    }
  }
  return null;

getChapter:函数（书，章）{
for（var i=0；i

}模板更新

  <ion-item class="item item-text-wrap">
  <p><div ng-include="'{{chapter.filename}}'"></div></p>
  </ion-item>
  <p> chapter ID is {{chapter.id}} </p>

更新你的app.js

getChapter: function(book, chapterId) {
  for (var i = 0; i < book.chapters.length; i++) {
    if (book.chapters[i].id === parseInt(chapterId)) {
      return book.chapters[i];
    }
  }
  return null;

getChapter:函数（书，章）{
for（var i=0；i

---

---

}

为什么你有

ng repeat=“书中章节.章节.id

而没有

ng repeat=“书中章节.章节”

？@AvraamMavridis，因为使用

ng repeat=“书中章节.章节”

将列出“所有”章节。我只想列出用户单击的章节的信息。为什么你有

ng repeat=”书中章节.chapters.id

而非

ng repeat=“书中章节.chapters

？@AvraamMavridis，因为使用

ng repeat=“书中章节.chapters

将列出“所有”章节。我只想列出用户单击的章节的信息。为什么您有

ng repeat=“chapter in book.chapters.id

而不是

ng repeat=“chapter in book.chapters

？@AvraamMavridis，因为使用

ng repeat=“chapter in book.chapters

将列出“所有”“各章。我只想列出用户单击的章节的信息。这是对

模板/book des.html

的修改吗？您已经更新了问题。我也必须更新我的答案。简单地说，用上述内容更新你的模板/book-chapter.html。不幸的是，它没有返回该章节的任何信息，我需要添加到控制器中的任何内容？在此之前，请在你的book-des.html中告诉我，book.chapters仅返回特定书籍或所有书籍的章节？这是对

模板/book des.html

的修改吗？您已经更新了问题。我也必须更新我的答案。简单地说，用上述内容更新你的模板/book-chapter.html。不幸的是，它没有返回该章节的任何信息，我需要添加到控制器中的任何内容？在此之前，请在你的book-des.html中告诉我，book.chapters仅返回特定书籍或所有书籍的章节？这是对

模板/book des.html

的修改吗？您已经更新了问题。我也必须更新我的答案。简单地说，用上面的内容更新你的模板/book-chapter.html。不幸的是，它不会返回该章节的任何信息，我需要向控制器添加什么吗？在此之前，请在你的book-des.html中告诉我，book.chapters只返回特定书籍的章节或所有书籍？