AngularJS

Question

我想用"ng-repeat"和"ng-controller"把所有的评论元素像列表一样显示出来，但是我不知道怎么在菜里面显示评论元素！像这样：

5 星
想象一下所有的食物，生活在混乱中！
约翰柠檬，十月。 17,2012

4 星
送谁上天堂，恨不得让婆婆吃！
Paul McVites，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>

Answer 1

这是一个简单的 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>

您可以将 <ul> 标签更改为任何其他标签以微调您要查找的内容

Answer 2

注：

由于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;
});

<!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>

但您也可以使用 special repeats:

如下遍历所有菜肴

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;
});

<!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-start="d in ctrl.dishes" ng-bind="d.name"></div><br>
    <div style="margin-left: 10px" ng-repeat-end ng-repeat="c in d.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>
    </div>
</body>

</html>

日期中使用的过滤器参考，您可以查看here。

Answer 3

<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>

AngularJS - 如何使用 ng-repeat

AngularJS - How to use ng-repeat

javascript

ng-repeat

ng-controller