我想通过使用“ng-repeat”和“ng-controller”显示列表中的所有注释元素，但我不知道如何在菜单中显示注释元素！
像这样：
5星
想象一下所有的食物，生活在融合中！
约翰柠檬，八月。 17,2012
4星
把任何人送到天堂，我希望我可以让我的婆婆吃它！
保罗麦克维特，2014年9月6日
。
。
。
var app = angular.module('confusionApp',[]);
app.controller('dishDetailController', function() {
this.filtText= '';
var dish=[
{
name:'Uthapizza',
image: 'images/uthapizza.png',
category: 'mains',
lable:'Hot',
price:'4.99',
description:'A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.',
comments: [
{
rating:5,
comment:"Imagine all the eatables, living in conFusion!",
author:"John Lemon",
date:"2012-10-16T17:57:28.556094Z"
},
{
rating:4,
comment:"Sends anyone to heaven, I wish I could get my mother-in-law to eat it!",
author:"Paul McVites",
date:"2014-09-05T17:57:28.556094Z"
},
{
rating:3,
comment:"Eat it, just eat it!",
author:"Michael Jaikishan",
date:"2015-02-13T17:57:28.556094Z"
},
{
rating:4,
comment:"Ultimate, Reaching for the stars!",
author:"Ringo Starry",
date:"2013-12-02T17:57:28.556094Z"
},
{
rating:2,
comment:"It's your birthday, we're gonna party!",
author:"25 Cent",
date:"2011-12-02T17:57:28.556094Z"
}
]
}];
this.dish = dish;
});
</script>
答案 0 :(得分：0)
这是一个简单的HTML，仅当您的菜单包含1个元素时才有效。如果它包含多个元素，您可以简单地遍历它
<强> HTML
<html ng-app="confusionApp">
<body>
<div ng-controller="dishDetailController">
<ul ng-repeat="c in dish[0].comments">
<li>{{c.rating}} stars</li>
<li>{{c.comment}}</li>
<li>{{c.author}}, {{c.date | date: 'mediumDate' }}</li>
</ul>
</div>
</body>
</html>
您可以将<ul>标记更改为任何其他标记，以微调您要查找的内容
答案 1 :(得分：0)
注意：
由于 dish 是一个数组，按照惯例，它应该是多元化的，所以我做了。
如果你只想在第一道菜的评论中进行迭代，那就可以了：
%var app = angular.module('confusionApp', []);
app.controller('dishDetailController', function() {
this.filtText = '';
var dishes = [{
name: 'Uthapizza',
image: 'images/uthapizza.png',
category: 'mains',
lable: 'Hot',
price: '4.99',
description: 'A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.',
comments: [{
rating: 5,
comment: "Imagine all the eatables, living in conFusion!",
author: "John Lemon",
date: "2012-10-16T17:57:28.556094Z"
}, {
rating: 4,
comment: "Sends anyone to heaven, I wish I could get my mother-in-law to eat it!",
author: "Paul McVites",
date: "2014-09-05T17:57:28.556094Z"
}, {
rating: 3,
comment: "Eat it, just eat it!",
author: "Michael Jaikishan",
date: "2015-02-13T17:57:28.556094Z"
}, {
rating: 4,
comment: "Ultimate, Reaching for the stars!",
author: "Ringo Starry",
date: "2013-12-02T17:57:28.556094Z"
}, {
rating: 2,
comment: "It's your birthday, we're gonna party!",
author: "25 Cent",
date: "2011-12-02T17:57:28.556094Z"
}
]
}];
this.dishes = dishes;
});
但您也可以使用special repeats：
在以下所有菜肴中进行迭代
<!DOCTYPE html>
<html ng-app="confusionApp">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
</head>
<body ng-controller="dishDetailController as ctrl">
<div ng-repeat="c in ctrl.dishes[0].comments">
<span ng-bind="c.rating + ' stars'"></span><br>
<span ng-bind="c.comment"></span><br>
<span>{{c.author}}, {{ c.date | date: 'MMM. dd,yyyy' }}</span><p>
</ul>
</body>
</html>var app = angular.module('confusionApp', []);
app.controller('dishDetailController', function() {
this.filtText = '';
var dishes = [{
name: 'Uthapizza',
image: 'images/uthapizza.png',
category: 'mains',
lable: 'Hot',
price: '4.99',
description: 'A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.',
comments: [{
rating: 5,
comment: "Imagine all the eatables, living in conFusion!",
author: "John Lemon",
date: "2012-10-16T17:57:28.556094Z"
}, {
rating: 4,
comment: "Sends anyone to heaven, I wish I could get my mother-in-law to eat it!",
author: "Paul McVites",
date: "2014-09-05T17:57:28.556094Z"
}, {
rating: 3,
comment: "Eat it, just eat it!",
author: "Michael Jaikishan",
date: "2015-02-13T17:57:28.556094Z"
}, {
rating: 4,
comment: "Ultimate, Reaching for the stars!",
author: "Ringo Starry",
date: "2013-12-02T17:57:28.556094Z"
}, {
rating: 2,
comment: "It's your birthday, we're gonna party!",
author: "25 Cent",
date: "2011-12-02T17:57:28.556094Z"
}
]
}];
this.dishes = dishes;
});
有关日期中使用的过滤器的参考，您可以查看here。
答案 2 :(得分：0)
<ul class="list-unstyled">
<li ng-repeat="comment in dish.comments | orderBy:query">
<blockquote>
<p> {{comment.rating}} stars</p>
<p>{{comment.comment}}</p>
<footer>{{comment.author}} ,{{comment.date | date:'MMM,dd,yyyy'}}</footer>
</blockquote>
</li>
</ul>