angular.js - Angular ng-repeat子级循环

Question

我想循环显示评论结果，但是一直无法显示。

  <ul>
  <li ng-repeat="dish in menuCtrl.dishes.comments ">
   <li ng-repeat="comments in dish.comments ">
   <p> {{comments.comment}}</p>
      </li>     
  </li>
</ul>

代码如下：

js：
<script>

    var app = angular.module('confusionApp', []);
    app.controller('dishDetailController', function () {
  
        var dishes = [
                     {
                         name: 'Uthapizza',
                         image: 'images/uthapizza.png',
                         category: 'mains',
                         label: '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;
       

    });

</script>

Answer 1

menuCtrlWhat is it? Try deleting it?

<li ng-repeat="dish in dishes.comments ">

Also,

var app = angular.module('confusionApp', []);
    // 这里你要注入$scope实例：
    app.controller('dishDetailController', function ($scope) {
        // 把dishes放进$scope的属性里
        $scope.dishes = [
            ......
        ]
        // 这句就不用了
        // this.dishes = dishes;
     })
     
// 在html里面，把menuCtrl删掉：
<li ng-repeat="dish in dishes ">