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

我刚刚开始使用Angular通过codechool课程。这是我的第一个框架。我试图用ng-repeat构建一个非常非常简单的菜单。这与密码学课程中的第一个项目非常相似，但似乎我可能误解了某些内容，或者可能有一个概念在本课程的这一点上没有得到充分的介绍。我已经回去重新制作了一些视频，这些视频涵盖了我需要知道的构建这些内容的方法，而且我看不出有什么可以阻止这项工作。我需要让球在这里滚动。我的指令是否是错误的？我的角度表达式不会从数组中获取数据

<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

来源

2015-02-11 Marcus

对不起，寄给了链接之前。大脑是混乱的。 – Marcus 2015-02-11 20:24:50

角度未加载。 – 2015-02-11 20:27:28

在'app.controller ...'中使用'appetizers'变量之前不会声明？ – 2015-02-11 20:29:03

你codepen有你的脚本文件为IIFE，但它缺少调用()末，所以它永远不会运行。如果删除IIFE定义(function(){ ... });，或者如果将调用添加到末尾})();，代码将运行得非常好。

请注意，这与Angular没有直接关系，它更像是一个JavaScript语义问题......不要让这让你失望地使用Angular！

来源

2015-02-11 20:31:16 Claies

你的错误是Failed to instantiate module menu还有的，你为什么会得到这个错误的几种可能性，但在这种情况下，这是因为它无法找到该模块菜单。如果你看看你的代码

(function(){ 

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

注意你永远不会实际调用匿名函数，所以代码从未实际运行。所有你需要做的就是调用函数&一切正常。

(function(){ 

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

来源

2015-02-11 20:30:40

你必须像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>

来源

2015-02-11 20:38:06 ntrp

代码没有问题，他使用Controller As语法，这是一种处理变量而不需要'$ scope'的替代方法。 https://docs.angularjs.org/api/ng/directive/ngController – Claies 2015-02-11 20:40:13

是的，它也应该这样工作，但我认为$ scope方法更清洁。这也是我改变这一部分的原因。 – ntrp 2015-02-11 20:47:09

你需要使用它之前，包括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>

来源

2015-02-11 20:42:44 Dayan

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

回答

相关问题