Your First App
ng-repeat II

Well done! You got both books in $scope.products to show up in the view. How does it work?

  1. In the controller, we used products to store an array containing two objects.
  2. Then in the view, we added <div ng-repeat="product in products">. Like ng-app and ng-controller, the ng-repeat is a directive. It loops through an array and displays each element. Here, the ng-repeat repeats all the HTML inside <div class="col-md-6"> for each element in the products array.

In this way, ng-repeat shows both products in the $scope.products array. Instead of writing the same HTML twice as before, we just use ng-repeat to generate the HTML twice.



The problem now is that both products have the same image. Let’s fix this.

In the view inside <div class="col-md-6">, replace

<img src="img/the-book-of-trees.jpg">


<img ng-src="{{ product.cover }}">

The ng-src is a directive that sets the <img> element’s src to a property in the controller.

Folder Icon

Take this course for free

Already have an account?