Stuck on Step 6 - Mains


#1

Been stuck on this the past 2 days and lost. I would assume that the mains would follow the same formula as did the appetizers, but no luck for me. Please help.

//MY HTML










PizzaPlanet


<div class="main" ng-controller="MainController">
  <div class="container">
    <h1>Specials for {{ today | date }}</h1>
    
    <h2>Appetizers</h2>
    <div class="appetizers 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 | currency}} </p>
      </div>
    </div>
    
    <h2>Main Dishes</h2>
    <div class="mains row" ng-repeat="main in mains">
      <div class="item col-md-9">
        <h3 class="name"> {{ mains.name }} </h3>
        <p class="description"> {{ mains.description }} </p>
      </div>
      <div class="price col-md-3">
        <p class="price"> {{ mains.price | currency}} </p>
      </div>
    </div>

  </div>
</div>

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


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

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


// MY CONTROLLER
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: 'Grille bread garlic, tomatoes, olive oil.',
price: 4.95
}
];

$scope.mains = [
{
name: 'Pizza',
description: 'Mozzarella, tomatoes, basil, balsmaic glaze.',
price: 4.95
},
{
name: 'Spaghetti',
description: 'Served with marinara sauce.',
price: 3.95
},
{
name: 'Lasagna',
description: 'Grille bread garlic, tomatoes, olive oil.',
price: 4.95
}
];

}]);


#2

Found my error, such a silly little error that was driving me crazy.

Should have been main.name and main.price etc. instead of mains.name or mains.price


#3

For some various reasons, my preview would not load the app. Can anyone help me with this.

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
}
];

}]);











PizzaPlanet


<div class="main">
  <div class="container">
    <h1>Specials for {{ today | date }}</h1>
    
    <h2>Appetizers</h2>
    <div class="appetizers 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 | currency }}</p>
      </div>
    </div>

  </div>
</div>

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

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

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



#4

@stealthtim - Did you remember to attach the controller?

<div class="main" ng-controller="MainController">

#5

I am having the same problem. double checked code and nothing displaying. I have the controller added, the app added and the repeat correct. nothing is showing for appetizers and the date displays as {{ today | date }}

compared my coded to previous posters and is identical


#6

found it, silly mistake
it was this at the end
}
];

missing bracket