Your First App Directive 8/11


#1

I am having problems fulfilling the outcome of the following instructions:

  1. In the controller, add two of your favorite books to the $scope.products array.

The view will update as the ng-repeat loops the new elements in the $scope.products array.

Here is my code (what I added to the existing code);

    name: 'One Simple Idea',
    price: 22,
    pubdate: new Date('2011', '02' '18'),
    cover: "https://s1.postimg.org/36xiodlmzz/Key-1259589676_3_D.jpg"
   },
{
    name: 'Sell Your Idea with or without a Patent',
    price: 22,
    pubdate: new Date('2015', '03','03'),
    cover:"https://s1.postimg.org/4vjmzpyxa7/stephen-key-book.jpg" 
   },

The resulting output that I get is:

{{title}}
{{promo}}

I have no idea why this is happening!

This is the code that I am adding to (my syntax is identical)

  $scope.title = 'This Month\'s Bestsellers'; 
  $scope.promo = 'The most popular books this month.';
  $scope.products = [
  	{ 
    	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' 
  	}, 
 ]
}]);

so all together, the entire code becomes:

app.controller('MainController', ['$scope', function($scope) { 
  $scope.title = 'This Month\'s Bestsellers'; 
  $scope.promo = 'The most popular books this month.';
  $scope.products = [
  	{ 
    	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' 
  	}, 
{
    name: 'One Simple Idea',
    price: 22,
    pubdate: new Date('2011', '02' '18'),
    cover: "https://s1.postimg.org/36xiodlmzz/Key-1259589676_3_D.jpg"
   },
{
    name: 'Sell Your Idea with or without a Patent',
    price: 22,
    pubdate: new Date('2015', '03','03'),
    cover:"https://s1.postimg.org/4vjmzpyxa7/stephen-key-book.jpg" 
   },
  ]
}]);

and here is the html/view code:

<!doctype html>
<html>
  <head>
      <link href="http://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css" rel="stylesheet" />
    <link href='http://fonts.googleapis.com/css?family=Roboto:500,300,700,400' rel='stylesheet' type='text/css'>
    <link href="css/main.css" rel="stylesheet" />

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
  </head>
  <body ng-app="myApp">
    <div class="header">
      <div class="container">
        <h1>Book End</h1>
      </div>
    </div>

    <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> 
				</div>

      </div>
    </div>

    <div class="footer">
      <div class="container">
        <h2>Available for iPhone and Android.</h2>
        <img src="http://s3.amazonaws.com/codecademy-content/projects/shutterbugg/app-store.png" width="120px" />
        <img src="http://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>
  </body>
</html>

What I’m I doing wrong?


#2

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.