Buy Button
var gem = {
name: “Dodechahedron”
price: 2.95
description: “. . . .”
canPurchase: false
}
Too add a button where add to cart shows when canPurchase is true:
<body ng-controller=“StoreController as store”>
<div > //
<h1> {{store.product.name}}</h1>
<h2>$store.product.price}}</h2>
<p>{{store.product.description}} </p>
<button ng-show=“store.product.canPurchase”>
Add to cart </button>
</div>
</body>
ng-show is the built in directive. To add a sold out button type:
soldOut:
and 2ndly
<div ng-show=“!store.product.soldOut”>
The ! flips the true/false, or use:
<div ng-hide=“store.product.soldOut”>
Working with/displaying Arrays
(function(){
var app = angular.module(‘store’,[ ]);
app.controller(‘StoreController, function(){
this.products = gems;
});
var gems = [ // the [ means its an array
{
name: “Dodechahedron”,
price: 2.95
description: “. . . .”
canPurchase: false
},
{
name: “Pentagonal Gem”,
price: 2.95
description: “. . . .”
canPurchase: false
}
];
To display this array you could write:
<body ng-controller=“StoreController as store”>
<div >
<h1> {{store.products[0].name}}</h1>
<h2>$store.products[0].price}}</h2>
<p>{{store.product[0].description}} </p>
<button ng-show=“store.product.canPurchase”>
Add to cart </button>
</div>
<div >
<h1> {{store.products[1].name}}</h1>
<h2>$store.products[1].price}}</h2>
<p>{{store.products[1].description}} </p>
<button ng-show=“store.product.canPurchase”>
Add to cart </button>
</div>
</body>
But to speed things up, and automate it, write:
<body ng-controller=“StoreController as store”>
<div ng-repeat=“product in store.products”>
<h1> {{product.name}}</h1>
<h2>${{product.price}}</h2>
<p>{{product.description}} </p>
<button ng-show=“product.canPurchase”>
Add to cart </button>
</div>
</body>
The directive ng-repeat displays all the values in an array.