Can't get next button to scroll in chapter page

Get Help Angular.js
#1

Hi I’m having trouble to get the next button on the chapter page to scroll through the page. Can someone tel me if there’s anything wrong with my codes?

Thanks in advance!

chapter.html

<a class="button back" href="#/books/{{ currentBook }}">Back</a>
<div class="chapter" ng-repeat="chapter in book.chapters">
<p><span class="title"> {{ book.title }} </span> <span class="author"> {{ book.author}} </span></p>
<h2 class="chapter-title"> {{ chapter.title }} </h2>
<p ng-repeat="paragraph in chapter.paragraphs">{{ paragraph }}</p>

<a class="button next" href="#/books/{{ currentBookIndex }}/chapters/{{ nextChapterIndex }}">Next</a>

</div>

ChapterController

app.controller('ChapterController', ['$scope', 'books', '$routeParams', function($scope, books, $routeParams) {
books.success(function(data) {

$scope.book = data[$routeParams.bookId];

$scope.chapter = $scope.book.chapters[$routeParams.chapterId];

// If there no more chapters left, go back to the bookshelf view if($routeParams.chapterId >= $scope.book.chapters.length - 1) { $scope.nextChapterIndex = "#"; } });

// Using these properties to create the URLs in line 1 and line 11 of view/chapter.html $scope.currentBookIndex = parseInt($routeParams.bookId); $scope.currentChapterIndex = parseInt($routeParams.chapterId); $scope.nextChapterIndex = $scope.currentChapterIndex + 1; }]);

1 Like
#2

Hey michelle_low – not sure if you figured this out yet or not, but just in case I thought I’d respond since I was having trouble with the same step. Your code is super close and referencing it helped me out a good deal in ultimately figuring out how to get this all to work.

I think the only thing you’d have to do to make it work is take out the ng-repeat in the “chapter” div.

Here’s my code for reference in case I missed other adjustments:

<a class="button back" href="#/books/{{ currentBook }}">Back</a>
<div class="chapter">
 <p><span class="title"> {{ book.title }} </span> <span class="author"> {{ book.author}} </span></p>
 <h2 class="chapter-title"> {{ chapter.title }} </h2>

 <p ng-repeat="paragraph in chapter.paragraphs">{{ paragraph }}</p>

 <a class="button next" href="#/books/{{ currentBookIndex }}/chapters/{{ nextChapterIndex }}">Next</a>

</div>
#3

Incorrect:

<div class="chapter" ng-repeat="chapter in book.chapters">

Correct:

<div class="chapter">

1 Like