Being new to Angular, I anticipated encountering issues, but this particular problem seems to be recurring intermittently.
While following a tutorial on learning Angular here, I was grasping the concept of using expressions.
My goal is to access an gem's attributes and showcase them on the webpage. However, the values of the object are not being accessed and are simply displaying as follows:
{{store.product.name}}
${{store.product.price}}
{{store.product.description}}
Add to Cart
Whereas my desired display would be:
Dodecahaderon
$2.95
. . .
Add to Cart
I considered that perhaps the discrepancy is due to the videos using Angular 1.2 while I'm using 1.4, but I am uncertain. What am I missing here and how can I correctly exhibit the object attributes?
Below is the code snippet:
(function () {
var app = angular.module('store', []);
app.controller('StoreController', function(){
this.product = gem;
});
var gem = {
name: 'Dodecahaderon',
price: 2.95,
description: '. . . ',
canPurchase = true,
soldOut = true
};
})();
<!DOCTYPE html>
<html ng-app="store">
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
</head>
<body ng-controller="StoreController as store">
<div ng-hide="store.product.soldOut">
<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>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>