CODEWITHSUNDEEP
javascriptangularjsangularjs-ng-repeat
Gowtham
Gowtham

Reputation: 1597

Angular js ng-repeat not working

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

Upvotes: 1

Views: 93

Answers (6)

zeeshan Qurban
zeeshan Qurban

Reputation: 387

You should use $scope.books instead of var books.

DEMO

Upvotes: 1

rejo
rejo

Reputation: 3350

Try this

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

Upvotes: 1

brk
brk

Reputation: 50291

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

}])

Upvotes: 1

Raman Sahasi
Raman Sahasi

Reputation: 31841

In your controller, instead of using 

var books

use 

$scope.books

Upvotes: 1

Nikhil.Patel
Nikhil.Patel

Reputation: 959

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

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

Upvotes: 0

Anik Islam Abhi
Anik Islam Abhi

Reputation: 25352

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

Upvotes: 1

Related Questions