CODEWITHSUNDEEP
javascriptangularjs
rze
rze

Reputation: 248

Webpage is displaying curly braces from expressions using Angular1.4

As I'm new to Angular, I expect to run in to issues however this issue seems to be repeating itself off and on.

As I'm following a tutorial on learning Angular here, I was learning about how to use expressions.

What I'm attempting to do is access an gem's attributes and display them on the webpage. However, the object values are not being accessed and it is just displaying as so:

{{store.product.name}}

${{store.product.price}}

{{store.product.description}}

Add to Cart

Where as I want it to display as:

Dodecahaderon

$2.95

. . .

Add to Cart

I thought it may be due to the videos using Angular1.2 and I'm using 1.4 however I'm not sure. What am I doing wrong and how can I properly display the object attributes?

Here is the code: 

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

Upvotes: 0

Views: 69

Answers (2)

Paul Fitzgerald
Paul Fitzgerald

Reputation: 12129

Currently gem is definied outside the scope of the controller. Also, as gem as an object you must change = to :

You need to change your code to this and it works

(function () {
  var app = angular.module('store', []);

app.controller('StoreController', function(){

  this.item = {
    name: 'Dodecahaderon',
    price: 2.95,
    description: '. . . ',
    canPurchase : true,
    soldOut : true
  };


});

})();

And your html to this:

<!DOCTYPE html>
    <html ng-app="store">
  <head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  </head>
  <body ng-controller="StoreController as store">
    <div ng-hide="store.product.soldOut">
      <h1>{{store.item.name}}</h1>
      <h2>${{store.item.price}}</h2>
      <p>{{store.item.description}}</p>
      <button ng-show="store.item.canPurchase">Add to Cart</button>
    </div>


  </body>
</html>

Also, you may need to replace your reference to angular from <script type="text/javascript" src="angular.min.js"></script> to <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></sc‌​ript>

Upvotes: 1

mariocatch
mariocatch

Reputation: 8693

Your angular library is not referenced correctly. Open your console window and make sure the angular script reference is actually working.

Upvotes: 2

Related Questions