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


#1

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 }}


#2

@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


#3

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


#4

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>

#5

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


#6

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


#7

all of the yes to this. thank you


#8

Obrigado, ajudou bastante


#9

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??


#10

#11

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