为什么我的jsangular不遍历我的范围？

Question

So I'm learning directives and controllers in JSAngular. 因此，我正在JSAngular中学习指令和控制器。 Currently I'm just trying to get the appetizers to loop through on the menu but can't seem to get the output to respond. 目前，我只是在尝试使开胃菜在菜单上循环，但似乎无法使输出做出响应。 What am I missing here? 我在这里想念什么？ Thanks in advance. 提前致谢。

MainController.js: MainController.js：

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

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

  $scope.mains = [
    {
      name: 'Roast Beef Au Jus',
      description: 'Delicious Amazing Sauce',
      price: 15.99
    },
    {
      name: 'Prime Rib',
      description: 'Just like Jacoby/s',
      price: 18.95
    },
    {
      name: 'BBQ Ribs',
      description: 'Better than Krupa/s',
      price: 15.99
    }
  ]

  $scope.extras = [
    {
      name: 'Cole slaw',
    },
    {
      name: 'Creamed Spinach',
    },
    {
      name: 'Boston Baked Beans',
    }
  ]

}]);

<!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="css/main.css" rel="stylesheet" />
    <script src="js/vendor/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="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"> {{ appetizers.price | currency }} </p>
          </div>
        </div>

      </div>
    </div>

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

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

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

Answer 1

you need to refer to your PizzaPlanetApp application module first. 您需要先参考您的PizzaPlanetApp应用程序模块。 Add the following line of code before creating the controller. 在创建控制器之前，添加以下代码行。

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

This refers to the app you want to create the controller of and contains the list of modules your app depends on. 这是指您要为其创建控制器的应用程序，并包含您的应用程序所依赖的模块列表。

In your case the list is empty. 在您的情况下，列表为空。

jsfiddle jsfiddle

为什么我的jsangular不遍历我的范围？

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-07-21 05:04:36

为什么我的jsangular不遍历我的范围？

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-07-21 05:04:36

解决方案1
1 已采纳 2015-07-21 05:04:36