This Angular Bootstrap Website II follows on from the previous Angular Bootstrap Website posting. The first example is practically the same as the last example in the previous post however the three expressions are now placed in a table with headings. CSS styles for the table have been added as well ‘text-center’ classes from bootstrap in the ‘th’ table heading elements.

See the Pen AngularBootstrapWebsiteII by Daniel (@Parsons) on CodePen.

First of all on line 10 in the ‘js‘ window a new name/value pair called ‘canPurchase’ is added to the ‘drink’ object. Click on ‘EDIT ON CODEPEN’ to view the line numbers.
Also on line 21 in the ‘html‘ window a ‘button’ element is added. Inside the button with Angular a directive is added to only display the button if the value for ‘canPurchase is true.

As the ‘canPurchase’ value in the ‘drink’ object is marked false the button does not show on the page.

See the Pen AngularBootstrapWebsiteII2 by Daniel (@Parsons) on CodePen.

We want to see our new button so on line 10 in the ‘js‘ window lets change the value from false to true.

See the Pen AngularBootstrapWebsiteII3 by Daniel (@Parsons) on CodePen.

Now lets add another property to our ‘drink’ json object. This property is called the ‘soldOut’ property and it’s value is set to ‘true’. We can now add an Angular ‘hide’ directive that will hide the product from the page if it has a ‘soldOut’ value of true.
Inside the ‘div’ element on line 7 in the ‘html’ window we add the following directive:

And as the example below shows our coke drink is now gone!

See the Pen AngularBootstrapWebsiteII4 by Daniel (@Parsons) on CodePen.

By simply changing the ‘soldOut’ value back to ‘false’ the coke drink will reappear.

See the Pen AngularBootstrapWebsiteII5 by Daniel (@Parsons) on CodePen.

One problem with our store is it only has the one drink, ‘coke’. Lets add some more drinks to our store. First of all we change the variable name from ‘drink’ to ‘drinks’ and then create an array of json objects inside the array. On line 4 in the ‘js’ window change the code to this.

On line 7 add a ‘repeat’ directive to the html page that will iterate through the drinks and display each one in the table.

In the ‘html’ window on lines 16,17 and 18 the following expressions are used:

And finally the ‘show’ directive added to the button looks like this:

See the Pen AngularBootstrapWebsiteII6 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 *