javascript - 如何在 Angular javascript中打印列表？

Question

请查看我的代码:

const DISH = {
  name: 'Uthappizza',
  image: '/assets/images/uthappizza.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"
    }
  ]
};

如何打印其中的注释？

Answer 1

您可以像这样在 DISH.comments 上运行 ng-repeat，

var myApp = angular.module('myApp', []);

myApp.controller('MyCtrl', function($scope){
    $scope.DISH = { name: 'Uthappizza', image: '/assets/images/uthappizza.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" } ] };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='myApp' ng-controller="MyCtrl">
   <div ng-repeat="comment in DISH.comments">
      <div>
         <ul>
           <li>author: {{comment.author}}</li>          
           <li>comment: {{comment.comment}}</li>
           <li>date: {{comment.date}}</li>
           <li>rating: {{comment.rating}}</li>

         </ul>
      </div>
    </div>
</div>