Angular JS ng-repeat不起作用

Question

I have done a sample app with angular js and added a ng-repeat to loop my data but it's not looping it. I have shown my code below

 <li style="background: white url('{{book.imgUrl}}') no-repeat" ng-repeat="book in books">
          <div>
            <h3>{{book.name}}</h3>
            <p>{{book.price}}</p>
            <ul>
              <li>Rating: {{book.rating}}</li>
              <li>Binding: {{book.binding}}</li>
              <li>Publisher: {{book.publisher}}</li>
              <li>Released: {{book.releaseDate}}</li>
            </ul>
            <p>{{book.details}}</p>
            <button class="btn btn-info pull-right" ng-click="addToKart(book)">Add to Kart</button>
          </div>
        </li>

I have created a live demo of the problem here

Answer 1

In order to get value in view from controller , you have to bind that with $scope.

Your books variable isn't bind with scope

Convert this

var books=[

to this

$scope.books=[

or like this

$scope.books=books

DEMO

Answer 2

Try this

Use $scope.books instead of var books = [];

Answer 3

In your controller, instead of using

var books

use

$scope.books

Answer 4

You are close.

Instead of var book you need to glue book variable with $scope

Like

 $scope.book=[{

   // Rest of code
}]

Also first pass the dependency as string else you may see error during minification

    app.controller('BookListCtrl',["$scope", function($scope) {
   // Rest of code

}])

Answer 5

您应该使用$scope.books而不是var books。

DEMO

Answer 6

Assign your book in specific controller scope object parameter as per below

app.controller('BookListCtrl', function($scope) {
$scope.books=books;
})