I am new to AngukarJS and ionic framework, I am trying to create an app with the following tree structure:
Home Tab (list of books) (templates/allbooks.html)
> unique book (book description and chapters) (templates/book-des.html)
>> unique chapter (templates/book-chapter.html)
here is the content of 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;
}
};
with the following controllers.js
....
.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);
})
.....
in the templates/allbooks.html I have the following ng-repeat
<div ng-repeat="book in books">
<p>{{book.title}}</p>
<p>{{book.author}}</p>
<p>{{book.category}}</p>
</div>
which successfully list all the books
in the templates/book-des.html I have the following ng-repeat
<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>
which gets the "current" book title and list all chapters. Everything is good so far
but in the templates/book-chapter.html I want to be able to show contents related to that specific chapter.
I tried using ng-repeat="chapter in book.chapters.id" but it is not working.
Main question is here:
in templates/book-chapter.html template:
<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>
How can I use the ng-repeate in that template to to pull out the information related to that unique chapter?
Template Update
<ion-item class="item item-text-wrap">
<p><div ng-include="'{{chapter.filename}}'"></div></p>
</ion-item>
<p> chapter ID is {{chapter.id}} </p>
Update your controller - .
controller('BookChapterCtrl', function($scope, $stateParams, Books) {
var book = Books.get($stateParams.bookId);
$scope.book = book;
// this returns error for getting chapter ID
$scope.chapter = Books.getChapter(book, $stateParams.chapterId);
})
Update your 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;
}