Skip to Content
Learn
Your First App
ng-repeat I

Let’s do a quick review:

  • A module contains the different components of an AngularJS app
  • A controller manages the app’s data
  • An expression displays values on the page
  • A filter formats the value of an expression

Instructions

1.

Let’s add more data to the controller and display them in the view.

In the controller, delete the $scope.product object.

2.

Attach a new property to $scope named products. Set it equal to an array of objects. Type in the contents exactly as you see here:

[ { name: 'The Book of Trees', price: 19, pubdate: new Date('2014', '03', '08'), cover: 'img/the-book-of-trees.jpg' }, { name: 'Program or be Programmed', price: 8, pubdate: new Date('2013', '08', '01'), cover: 'img/program-or-be-programmed.jpg' } ]
3.

In the view inside <div class="main">, delete the HTML that displays the product’s name, price, and pubdate.

Replace it with this HTML. Type in the contents exactly as you see here:

<div ng-repeat="product in products" class="col-md-6"> <div class="thumbnail"> <img src="img/the-book-of-trees.jpg"> <p class="title">{{ product.name }}</p> <p class="price">{{ product.price | currency }}</p> <p class="date">{{ product.pubdate | date }}</p> </div> </div>

You’ll see that both products have the same cover image. Let’s fix this bug in the next exercise. Click Next to continue.

Folder Icon

Take this course for free

Already have an account?