This object doesn't make sense on 9/11


#1

If we look at the code on the index file on the "p class title, price, and date" we would notice that the expression allows us to use product.title, product.price, and product.date. If we look at our MainController.js, the object we created is "products." If that is the case, then how does the word "product" work when we call the "products object?"
Index File:





<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>





Book End



<div class="main" ng-controller="MainController">
  <div class="container">

    <h1>{{ title }}</h1>
    <h2>{{ promo }}</h2>

   <div ng-repeat="product in products" class="col-md-6">
     <div class="thumbnail">
     	<img ng-src="{{product.cover}}">
       <p class="title">{{product.name}}</p>
       <p class="price">{{product.price | currency}}</p>
       <p class="date">{{product.pubdate | date}}</p>
       <div class="rating">
         <p class="likes" ng-click="plusOne($index)">+{{product.likes}} </p>
         <p class="dislikes" ng-click="minusOne($index)">-{{product.dislikes}}</p>
     </div>

  </div>
</div>

<div class="footer">
  <div class="container">
    <h2>Available for iPhone and Android.</h2>
    <img src="https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/app-store.png" width="120px" />
    <img src="https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/google-play.png" width="110px" />
  </div>
</div>


<!-- Modules -->
<script src="js/app.js"></script>

<!-- Controllers -->
<script src="js/controllers/MainController.js"></script>



#2

The line:

<div ng-repeat="product in products" class="col-md-6">

will use ng-repeat to iterate over the products array.

We could think of it like a for loop where we start with products[0].cover, products[1].cover and so on, using "product in products" does something similar behind the scenes to make it easier to code.