Angularjs not recognizing {{}}

Question

I'm working through an angular tutorial and I have this output on the actual page: {{product.name}} ${{product.price}}

my html and js are below

<!DOCTYPE html>
<html ng-app="gemStore">
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"/>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script>
    <script type="text/javascript" src="app.js"></script>
</head>
<body class="container" ng-controller="StoreController as store">
<div class="product row" ng-repeat='product in store.products'>
    <h3>
        {{product.name}}
        <em class="pull-right">${{product.price}}</em>
    </h3>
</div>
</body>
</html>

and next the js

(function() {
  var app = angular.module('gemStore', ['bootstrap-tagsinput']);

  app.controller('StoreController', function(){
    this.products= gems;
  });

  var gems = [
    { name: 'Azurite', price: 2.95 },
    { name: 'Bloodstone', price: 5.95 },
    { name: 'Zircon', price: 3.95 },
  ];
})();

Any help on how to actually display the contents of product.name would be appreciated. Also why is the html not recognizing these braces {{}} and displaying java script for them?

var app = angular.module('gemStore', ['bootstrap-tagsinput']); — tymeJV
– tymeJV, Commented Jan 26, 2015 at 14:29
whenever angular is not parsing your markup and is outputting the raw expressions, it generally means that angular itself, your app, or one of your controllers failed to load correctly. What errors do you have in the console logs? — Claies
– Claies, Commented Jan 26, 2015 at 14:31
also, you defined your controller StoreController as store but then are referencing a product which isn't your controller, nor is it a property on your StoreController, so it's not clear where that is supposed to come from? I think you are missing an ng-repeat element here, something like ng-repeat = "product in store.gems" — Claies
– Claies, Commented Jan 26, 2015 at 14:38

Mathew Berg · Accepted Answer · 2015-01-26 16:21:23Z

1

This line is wrong:

var app = angular.module('bootstrap-tagsinput', 'gemStore', []);

You can only have one main module, and your main app is gemStore so it should be something like this:

var app = angular.module('gemStore', ...

edited Jan 26, 2015 at 16:21

answered Jan 26, 2015 at 14:34

Mathew Berg

28.8k11 gold badges72 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

micronyks · Accepted Answer · 2015-01-26 14:43:26Z

0

<div ng-app='gemStore'>
<div class="container" ng-controller="StoreController as store">
<div class="product row">
    <h3 ng-repeat="product in products">
        {{product.name}}
        <em class="pull-right">${{product.price}}</em>
    </h3>
</div>
</div>
</div>

your angular controller file,

var app = angular.module('gemStore', []);

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

     // var gems = [
    $scope.products=[  
    { name: 'Azurite', price: 2.95 },
    { name: 'Bloodstone', price: 5.95 },
    { name: 'Zircon', price: 3.95 },
  ];

  });

Want to test this code? please use this fiddle made for you, http://jsfiddle.net/xfeh06zg/

answered Jan 26, 2015 at 14:43

micronyks

55.6k17 gold badges122 silver badges166 bronze badges

4 Comments

micronyks Over a year ago

made few changes as required. if you any specification, let me know.

David Carek Over a year ago

Thanks for the fiddle link but I think it might be an issue with the link and script tags in head

micronyks Over a year ago

Your code will not work as you have made several mistakes ! Thats why, rather than suggesting you anything, I have come up with fiddle link.

micronyks Over a year ago

Even your edited code will not work as still I can see the errors !

Nisham Mahsin · Accepted Answer · 2015-01-26 14:49:12Z

0

you have no scope called product. you have to define product scope in your controller see jsfiddle

View

<div ng-app="gemStore">
  <div class="container" ng-controller="StoreController as store">
    <div class="product row" ng-repeat="product in store.products">
      <h3>
        {{product.name}}
        <em class="pull-right">${{product.price}}</em>
      </h3>
 </div>

controller

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

  app.controller('StoreController', function(){
    this.products = gems;
  });

  var gems = [
    { name: 'Azurite', price: 110.50 },
    { name: 'Bloodstone', price: 22.90 },
    { name: 'Zircon', price: 1100 },
  ];
})();

answered Jan 26, 2015 at 14:49

Nisham Mahsin

1,3995 gold badges19 silver badges44 bronze badges

Comments

David Carek · Accepted Answer · 2015-01-26 15:10:05Z

0

I believe the issue is that I did not have the correct script src here is what the first link and script tags should have been:

`<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"/>`

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script>

answered Jan 26, 2015 at 15:10

David Carek

1,1131 gold badge14 silver badges29 bronze badges

Collectives™ on Stack Overflow

Angularjs not recognizing {{}}

4 Answers 4

Comments

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related