5. Filters II unable to display pubdate via index.html

So, I’ve managed to successfully add a third property, called pubdate, to the MainController.js. But when I try to display that property via an expression in index.html, I keep getting the error message “did you display the pubdate?”.

Here’s what I wrote in MainController.js:

$scope.title = ‘My First AngularJS App!’;
$scope.promo = ‘New Promotions Available Here’;
// Attach another property to $scope, named product
$scope.product =
{
name: ‘The Book of Trees’,
price: 19,
pubdate: new Date(‘2014’, ‘03’, ‘08’)
// add third property named pubdate
};
}]);

Here’s what I wrote for the view’s expression in index.html (for some reason, I can’t get the paragraph tags, nor the “date” property to display on this forum, in the following code snippet!!):

{{ pubdate }}

1 Like

@vixen_gauntlet,

Please re-edit your Post

  • leave one blank-line above of your code
  • select your code in the Post
  • then =click= on the </>-symbol-of-this-editor

Your code will then be in a pre-code state
and you will be able to make/present the proper indentations.

or even better use
= http://discuss.codecademy.com/t/using-backticks-to-format-your-code/3697/2
[extra’s]
https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet

2 Likes

you are supposed to write {{ product.pubdate }}

1 Like

Thanks so much for the formatting tips, Leonhard! Sorry for the late response. I managed to make my code run after piping the filters. Here’s my second attempt at re-editing the post:

<!doctype html>
<html>
  <head>
      <link href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css" rel="stylesheet" />
    <link href='https://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 class="col-md-6">
          <div class="thumbnail">
            <img src="img/the-book-of-trees.jpg">
            <p class="title"> </p>
            <p>{{ product.name | uppercase }}</p> <!-- piping product's name to the uppercase filter -->
            
            <p class="price"> </p>
         <!--   <p>{{ product.price }}</p> -->
            <!-- FILTERS: change expression to format as currency -->
            <p>{{ product.price | currency }}</p>
            <p class="date"> </p>
            <!-- display the product's pubdate-->
            <p>{{ product.pubdate | date }}</p> <!-- piping to the date filter -->
          </div>
        </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>
  </body>
</html>
1 Like

That definitely helped my code run, Wayne. Forgot about displaying the pubdate in the expression!

No problem,i figured it out but only just,it is very confusing sometimes to use this after doing Java for a few years.

all of the yes to this. thank you

Obrigado, ajudou bastante

I want to use Two filters Simultaneously on a single data such as
product.name should be uppercase and bold. Anyone knows how to do it??

This topic is really old, please make a new one. Very unlikely you will get a response here, given the users in this topic haven’t been very active on the forum