javascript - 在对象内部的数组上使用的 ng-repeat 重复等于对象元素的数量？

Question

.controller('DishDetailController', ['$scope', function($scope) {

         var dish={
                      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"
                           }
                          ]};

        $scope.dish = dish;

//重复代码是:

<div class="col-xs-9 col-xs-offset-1">
    <ul> 
      <li ng-repeat="x in dish">
        <ul class="media-list">
          <li ng-repeat="com in dish.comments | filter:filtText" >
            <blockquote><h4><b> {{ com.rating}} Stars </b></h4>
              <p> {{com.comment}}</p>
              <p style="color:#919FB8"> - {{com.author}} , {{com.date}}</p>
            </blockquote> </li>
        </ul>
      </li>
    </ul>
</div>

我只想输出一次评论列表。但它却显示了 7 次。我无法理解我的重复代码的问题。

Answer 1

您需要删除外部 ng-repeat，因为您只想迭代 dish.comments。

您的 html 应该如下所示:

<div class="col-xs-9 col-xs-offset-1">
    <ul class="media-list">
      <li ng-repeat="com in dish.comments | filter:filtText" >
        <blockquote><h4><b> {{ com.rating}} Stars </b></h4>
          <p> {{com.comment}}</p>
          <p style="color:#919FB8"> - {{com.author}} , {{com.date}}</p>
        </blockquote> </li>
    </ul>
</div>

另一方面，如果您有一个 dish 数组，并且想要显示所有这些内容以及相应的注释，您可以维护外部 ng-repeat，但只需进行简单的更改。

<div class="col-xs-9 col-xs-offset-1">
    <ul> 
      <li ng-repeat="x in dish">
        <ul class="media-list">
          <li ng-repeat="com in x.comments | filter:filtText" >
            <blockquote><h4><b> {{ com.rating}} Stars </b></h4>
              <p> {{com.comment}}</p>
              <p style="color:#919FB8"> - {{com.author}} , {{com.date}}</p>
            </blockquote> </li>
        </ul>
      </li>
    </ul>
</div>

观察我将内部更改为 ng-repeat="com in x.comments"。

希望对你有帮助