Javascript AngularJS-如何使用ng repeat_Javascript_Angularjs_Ng Repeat_Ng Controller

Javascript AngularJS-如何使用ng repeat

javascript angularjs

Javascript AngularJS-如何使用ng repeat,javascript,angularjs,ng-repeat,ng-controller,Javascript,Angularjs,Ng Repeat,Ng Controller,我想通过使用“ng repeat”和“ng controller”显示所有注释元素，就像一个列表一样，但我不知道如何显示菜中的注释元素！像这样：五星想象一下所有的食物，生活在混乱中约翰·莱蒙，2012年10月17日四星送任何人到天堂，我希望我能让我的岳母吃它保罗·麦克维特斯，2014年9月6日 . . . var-app=angular.module（'confusionApp'，[]）； app.controller（'dishdailcontroller'，fun

我想通过使用“ng repeat”和“ng controller”显示所有注释元素，就像一个列表一样，但我不知道如何显示菜中的注释元素！像这样：

五星
想象一下所有的食物，生活在混乱中
约翰·莱蒙，2012年10月17日

四星
送任何人到天堂，我希望我能让我的岳母吃它
保罗·麦克维特斯，2014年9月6日
. . .

var-app=angular.module（'confusionApp'，[]）；
app.controller（'dishdailcontroller'，function（）{
this.filtext=''；
真空皿=[
{
名称：'Uthapizza'，
图片：“images/uthapizza.png”，
类别：'干线'，
标签：'热'，
价格：'4.99'，
描述：“一种独特的印度乌萨帕姆（煎饼）和意大利比萨饼组合，顶部有樱桃橄榄、成熟的葡萄藤樱桃西红柿、维达利亚洋葱、甘特辣椒和水牛肉饼。”，
评论：[
{
评级：5，
评论：“想象一下所有的食物，生活在混乱中！”，
作者：“约翰·莱蒙”，
日期：“2012-10-16T17:57:28.556094Z”
},
{
评级：4，
评论：“把任何人送到天堂，我希望我能让我岳母吃！”，
作者：“Paul McVites”，
日期：“2014-09-05T17:57:28.556094Z”
},
{
评级：3，
评论：“吃吧，就吃吧！”，
作者：“迈克尔·贾基尚”，
日期：“2015-02-13T17:57:28.556094Z”
},
{
评级：4，
评论：“终极，追求星空！”，
作者：“林戈·斯塔里”，
日期：“2013-12-02T17:57:28.556094Z”
},
{
评级：2，
评论：“今天是你的生日，我们要开派对！”，
作者：“25分”，
日期：“2011-12-02T17:57:28.556094Z”
}
]
}];
这道菜=这道菜；
});

这是一个简单的HTML，仅当您的dish数组包含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>



{{c.rating}}星
{{c.comment}}
{{c.author}}，{c.date | date:'mediumDate'}

您可以通过任何其他标记更改

标记，以微调您要查找的内容。

注意：

由于dish是一个数组，按照惯例，它应该是复数的，所以我就这样做了

如果您只想在第一道菜的评论中迭代，那么它可以工作：

var-app=angular.module（'confusionApp'，[]）；
app.controller（'dishdailcontroller'，function（）{
this.filtext=''；
变量=[{
名称：“Uthapizza”，
图片：“images/uthapizza.png”，
类别：'干线'，
标签：“热”，
价格：'4.99'，
描述：“一种独特的印度乌萨帕姆（煎饼）和意大利比萨饼组合，顶部有樱桃橄榄、成熟的葡萄藤樱桃西红柿、维达利亚洋葱、甘特辣椒和水牛肉饼。”，
评论：[{
评级：5，
评论：“想象一下所有的食物，生活在混乱中！”，
作者：“约翰·莱蒙”，
日期：“2012-10-16T17:57:28.556094Z”
}, {
评级：4，
评论：“把任何人送到天堂，我希望我能让我岳母吃！”，
作者：“Paul McVites”，
日期：“2014-09-05T17:57:28.556094Z”
}, {
评级：3，
评论：“吃吧，就吃吧！”，
作者：“迈克尔·贾基尚”，
日期：“2015-02-13T17:57:28.556094Z”
}, {
评级：4，
评论：“终极，追求星空！”，
作者：“林戈·斯塔里”，
日期：“2013-12-02T17:57:28.556094Z”
}, {
评级：2，
评论：“今天是你的生日，我们要开派对！”，
作者：“25分”，
日期：“2011-12-02T17:57:28.556094Z”
}
]
}];
这道菜=盘子；
});





{{c.author}，{c.date | date:'MMM.dd，yyyy'}



{{comment.rating}}星星
{{comment.comment}
{{comment.author}，{{comment.date}日期：'MMM，dd，yyyy'}


您是否将控制器用作ng controller=“dishdailcontroller as”
？也请给我们看看视图我不知道如何写视图！在我的回答中我给了你一个可能的观点。顺便说一句，如果你在互联网上多做一些研究，你可以很容易地找到解决办法。小懒虫当我不知道什么的时候，我先读，然后再读，这样我就不必乞求其他开发者为我写代码了！非常感谢，它的效果完全相同。有没有办法去掉黑点？如果你指的是标签的构造，是的，请看编辑后的答案。你能接受这个答案吗？（只需点击绿色按钮）。再次感谢您的帮助，我找到了如何接受它。
<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 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>