AngularJS - How to use ng-repeat

Question

I want to show all the comments elements like a list by using the "ng-repeat" and "ng-controller" , but I don't know how to show the comments elements inside the dish ! like this :

5 stars
Imagine all the eatables, living in conFusion!
John Lemon,oct. 17,2012

4 stars
Sends anyone to heaven, I wish I could get my mother-in-law to eat it!
Paul McVites,Sep.06,2014
. . .

    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

Note:

Since dish is an array, by convention, it should be pluralized, so I did it.

If you only want to iterate in comments of the first dish, it works:

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>

But you can also iterate in all dishes as the following, using 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>

For reference of filter used in date, you can check here.