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"。

希望有所帮助

Answer 2

移除
ng-repeat =＆＃34; x in dish＆＃34;

导致循环运行7次

 Street: Londonstreet
 Number: 13

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

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

2 个答案: