在对象内部数组上使用的 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-重复="x in dish"

这导致循环运行 7 次

<div class="col-xs-9 col-xs-offset-1">
            <ul>
              <li>
                <ul class="media-list">
                  <li ng-repeat="com in dish.comments | filter:filtText">

Codepen url 供参考 - http://codepen.io/nagasai/pen/QENXbW

Answer 2

您需要删除外部 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>

注意我把inner改成了ng-repeat="com in x.comments".

希望对您有所帮助

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

ng-repeat used over array inside object is repeating equal to number of object elements?

javascript

angularjs

ng-repeat

angularjs-ng-repeat