我的 Angular 表达式不会从数组中获取数据

Question

我刚开始 Angular 通过代码学校课程。这是我的第一个框架。我正在尝试使用 ng-repeat 构建一个非常非常简单的菜单。这与 codeschool 课程中的第一个项目非常相似，但似乎我可能误解了某些东西，或者可能有一个概念在课程的这一点上没有得到充分涵盖。我回去重新观看了涵盖构建此内容所需知识的视频，但我看不出是什么阻止了它的工作。我需要让球在这里滚动。我的指令有误吗？

 <html ng-app = 'menu'>
  <body ng-controller = 'MenuController as menu'>
    <section ng-repeat="menuItem in menu.menuItem">
      <h1> {{menuItem.name}} </h1>
      <p> {{menuItem.description}} </p>
      <h3> {{menuItem.price}} </h3>
    </section>
  </body>
</html>

这是 JS：

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

app.controller("MenuController", function(){
  this.menuItem = appetizers;
});

var appetizers = [{
    name : "Seared Ahi Tuna",
    decription : "Cooked rare, thinly sliced and served over seaweed salad with a teriyaki glaze",
    price : "12"
},
{
    name : "Artisan Cheese Board",
    decription : "Five chef-selected cheeses from WI farms (Sorry, no happy hour)",
    price : "12"
}...

codepen

Answer 1

您的错误是Failed to instantiate module menu 您会收到此错误的原因有多种可能，但在本例中是因为找不到模块菜单。如果你看看你的代码

(function(){

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

请注意，您从未真正调用过匿名函数，因此代码从未真正运行过。您所要做的就是调用函数，一切正常。

(function(){

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

Answer 2

您的 codepen 将您的脚本文件作为 IIFE，但它缺少末尾的调用 ()，因此它永远不会运行。如果删除 IIFE 定义 (function(){ ... }); 或者将调用添加到末尾 })();，代码将运行完美无缺 })();。

请注意，这与 Angular 没有直接关系，它更多的是 JavaScript 语义问题...不要因此而放弃使用 Angular！

Answer 3

你必须像Austin说的那样执行匿名函数，但是代码也是错误的。通常最好将范围注入到控制器中，以使该项目可以从 ng-repeat 命令访问。

(function() {

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

  app.controller("MenuController", function($scope) {
    $scope.menuItem = appetizers;
  });

  var appetizers = [{
    name: "Seared Ahi Tuna",
    decription: "Cooked rare, thinly sliced and served over seaweed salad with a teriyaki glaze",
    price: "12"
  }, {
    name: "Artisan Cheese Board",
    decription: "Five chef-selected cheeses from WI farms (Sorry, no happy hour)",
    price: "12"
  }, {
    name: "Oysters on the Half Shell*",
    decription: "Fresh Blue Points from the Delaware Bay",
    price: "1/2 Order 10, Full Dozen 16"
  }, {
    name: "Chorizo Sliders",
    decription: "Three sliders on pretzel buns with sauteed onion, fried pickle chip and grained mustard",
    price: "9"
  }, {
    name: "Tenderloin Lollipops*",
    decription: "Served over a bed of red wine garlic mushrooms",
    price: "10"
  }]
})();

section {
  border: 1px solid grey;
  width: 50%;
  margin: 0 auto;
}

<html ng-app='menu'>

<head>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>

<body ng-controller='MenuController'>
  <section ng-repeat="item in menuItem">
    <h1> {{item.name}} </h1>
    <p>{{item.description}}</p>
    <h3> {{item.price}} </h3>
  </section>
</body>

</html>

Answer 4

您需要在使用前包含 AngularJS 框架，并且您没有注入作用域。原始调用具有匿名函数但不执行它。

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




app.controller("MenuController", ['$scope',
  function($scope) {

    $scope.appetizers = [{
      name: "Seared Ahi Tuna",
      decription: "Cooked rare, thinly sliced and served over seaweed salad with a teriyaki glaze",
      price: "12"
    }, {
      name: "Artisan Cheese Board",
      decription: "Five chef-selected cheeses from WI farms (Sorry, no happy hour)",
      price: "12"
    }, {
      name: "Oysters on the Half Shell*",
      decription: "Fresh Blue Points from the Delaware Bay",
      price: "1/2 Order 10, Full Dozen 16"
    }, {
      name: "Chorizo Sliders",
      decription: "Three sliders on pretzel buns with sauteed onion, fried pickle chip and grained mustard",
      price: "9"
    }, {
      name: "Tenderloin Lollipops*",
      decription: "Served over a bed of red wine garlic mushrooms",
      price: "10"
    }];



    $scope.menu = $scope.appetizers;
  }
]);

section {
  border: 1px solid grey;
  width: 50%;
  margin: 0 auto;
}

<html ng-app='menuApp'>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.12/angular.min.js"></script>
</head>

<body ng-controller='MenuController'>
  <section ng-repeat="menuItem in menu">
    <h1> {{menuItem.name}} </h1>
    <p>{{menuItem.description}}</p>
    <h3> {{menuItem.price}} </h3>
  </section>
</body>

</html>

我的 Angular 表达式不会从数组中获取数据

My Angular expressions wont take data from an array

javascript

angularjs

angularjs-ng-repeat