user6680 user6680 - 1 year ago 40
AngularJS Question

ng-repeat not outputting array results

I'm still fairly new at this, but I'm having issues getting my ng-repeat to output and book.stars. Can anyone point out what's wrong? Even if I put something like just a word in the ng-repeat like for instance

Test Word

Test Word never renders on the screen.


<!DOCTYPE html>
<html ng-app="DirectivesTest">
<title>Directives Practice</title>
<link rel="stylesheet" href="app.css">
<script src="bower_components/angular/angular.js"></script>
<script src="app.js"></script>
<div id="header">
The #1 Book Review Site With Only 6 Books!
<div class="container">
<div class="row">
<div class="col-md-4">
<div ng-controller="BookController">
<div class="test" ng-repeat="book in books">



var app = angular.module('DirectivesTest', []);

app.directive('bookReviews', function(){
return {
restrict: 'E',
templateUrl: 'book-reviews.html',
controller: 'BookController' //controller function
}; //end return
}) //end directive

app.controller("BookController", [ '$scope', function($scope){
$scope.books = [{
$scope.title: "Harry Potter and the Sorcerer's Stone",
$scope.description: "Harry Potter has no idea how famoushe is. That's because he's being raised by his miserable aunt and uncle who are terrified Harry will learn that he's really a wizard, just as his parents were. But everything changes when Harry is summoned to attend an infamous school for wizards, and he begins to discover some clues about his illustrious birthright. From the surprising way he is greeted by a lovable giant, to the unique curriculum and colorful faculty at his unusual school, Harry finds himself drawn deep inside a mystical world he never knew existed and closer to his own noble destiny.",
$ [
$scope.stars: 5,
$scope.body: "I love this book!",
$ "",
$scope.createdOn: 42434343
$scope.stars: 4,
$scope.body: "It was pretty good. A little long though",
$ "",
$scope.createdOn: 42434343
$scope.stars: 5,
$scope.body: "It's the best book I've ever read.",
$ "",
$scope.reatedOn: 454535543


Answer Source

You have to use $scope to provide the bindings between the controller and the view.

In your case:

app.controller("BookController", function($scope){
$scope.books = [{