Angular Expression doesn't display

Question

I've got a bit of a mystery here which I'm hoping some in the know about Angular will be able to resolve.

It's a simple example of using ng-repeat to display a block of information 3 times. There's 3 values in an object of the controller js file. Name, Description and Price. But price won't show up. Any ideas why?

http://www.jonniegrieve.co.uk/jg-lab.co.uk/codecademy/angular2/index.html

<!doctype html>
<html>
  <head>
    <link href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css" rel="stylesheet" />
    <link href='https://fonts.googleapis.com/css?family=Playfair+Display:400,400italic,700italic|Oswald' rel='stylesheet' type='text/css'>
    <link href="main.css" rel="stylesheet" />
    <script src="angular.min.js"></script>
  </head>

  <body ng-app="PizzaPlanetApp">
    <div class="header">
      <h1><span>Pizza</span><span>Planet</span></h1>
    </div>

    <div class="main" ng-controller="MainController">
      <div class="container">
        <h1>Specials for {{ today | date }}</h1>

        <h2>Appetizers</h2>
        <div class="row">
          <div class="item col-md-9" ng-repeat="appetizer in appetizers">
            <h3 class="name"> {{ appetizer.name }} </h3>
            <p class="description">{{ appetizer.description }} </p>
          </div>
          <div class="price col-md-3">
            <p class="price">{{ appetizer.price }}</p>
          </div>
        </div>

      </div>
    </div>

    <div class="footer">
    </div>

    <!-- Modules -->
    <script src="app.js"></script>

    <!-- Controllers -->
    <script src="MainController.js"></script>
  </body>
</html>

var app = angular.module("PizzaPlanetApp",[]);

app.controller('MainController', ['$scope', function($scope) {
  $scope.today = new Date();

  $scope.appetizers = [
    {
      name: 'Caprese',
      description: 'Mozzarella, tomatoes, basil, balsmaic glaze.',
      price: 4.95
    },
    {
      name: 'Mozzarella Sticks',
      description: 'Served with marinara sauce.',
      price: 3.95
    },
    {
      name: 'Bruschetta',
      description: 'Grilled bread garlic, tomatoes, olive oil.',
      price: 4.95
    }
  ];

}]);

Answer 1 · 2015-05-04T12:43:31Z

May 4, 2015 12:43pm

Hi Jonathan,

You appear to have your ng-repeat attribute on the wrong line, to me it makes sense to have it on the .row above since you're using columns, try the below.

<div class="row" ng-repeat="appetizer in appetizers">
  <div class="item col-md-9">
    <h3 class="name"> {{ appetizer.name }} </h3>
    <p class="description">{{ appetizer.description }} </p>
  </div>
  <div class="price col-md-3">
    <p class="price">{{ appetizer.price }}</p>
  </div>
</div>

Hope that helps.

Welcome to the Treehouse Community

Looking to learn something new?

Jonathan Grieve

Jonathan Grieve

Angular Expression doesn't display

1 Answer

Chris Shaw

Chris Shaw

Jonathan Grieve

Jonathan Grieve