Angular Bootstrap Website III picks up from Angular Bootstrap Website II and Angular Bootstrap Website.
First of all lets revise some Angular directives we used in the previous posts.

  • <html ng-app=”store”> – ‘ng-app’ attaches the Application Module to the page
  • <body ng-controller=”StoreController as store”> – ‘ng-controller’ attaches a Controller function to the page
  • <h1 ng-show=”name” > {{name}}!</html> – ‘ng-show / ng-hide’ display a section based on an Expression
  • <li ng-repeat=”product in store.products”> {{product.name}}<li> – ‘ng-repeat’ repeats a section for each item in an Array

In this tutorial the code has been restyled and cleaned up a bit from the last tutorial. The code now looks like this.

See the Pen Angular Bootstrap Website IIIOne by Daniel (@Parsons) on CodePen.

That looks better however the prices look a bit funny. To format the prices properly Angular has a currency filter. On line 11 in the ‘html’ document the code with a currency filter now looks like this:

Notice we got rid of the dollar sign ‘$’ however the Angular currency filter puts it into each price outputted.
Angular has many filters and the general syntax used for filters is:

In the example above the ‘product.price’ is the data, and ‘currency’ is the filter option.

Another Angular filter option is the ‘orderBy: price’ filter. This filter will display all the products in ascending order (cheapest to most expensive). On line 8 of the ‘html’ document the following code is added:

See the Pen Angular Bootstrap Website IIIThree by Daniel (@Parsons) on CodePen.


A minus sign in front of ‘price’ will display the products in a descending order (most expensive to cheapest).

To display images of the products with Angular is easy. First under the ‘description’ property in each ‘drink’ object create a new array with the name ‘images’. In each new array create a ‘name / value’ pair for a ‘full’ image and then pass a reference to the full image. Also to view a ‘thumbnail’ image create another ‘name / value’ pair and pass a reference to the thumbnail image. Here is the ‘water’ object with the new ‘images’ array.

To display the thumbnail image in a product the expression looks like this:

We then take this expression and pass it ‘ng-src’ directive inside an ‘img’ tag.

See the Pen Angular Bootstrap Website IIIFour by Daniel (@Parsons) on CodePen.


Angular logo.

Share!Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on PinterestShare on RedditShare on Tumblr

Leave a Reply

Your email address will not be published. Required fields are marked *