我有一个嵌套的各种细节列表,并希望使用angularJs一个接一个地显示它们.我的代码将有助于理解我的查询

I have a nested list of various details and want to show each of them one after the other using angularJs. My code will help understand my query

本文关键字:一个 我的 有一个 显示 代码 查询 有助于 嵌套 希望 列表 angularJs      更新时间:2023-09-26

script标签中的变量'dish'有两个列表,每个列表都包含另一个嵌套列表,名为'comments'。使用angularJs(可能是ng-repeat指令),我想在变量'dish'中显示每个项目的媒体标签,然后在下面的'blockquotes'标签中显示该项目的所有评论,如图所示。当"盘子"只有一个项目时,我能做到这一点,但当它有两个或更多的项目时,我就不能做到了。请帮帮我。我想给每个项目一个_id并使用它,但不知道如何使用它。

 <div class="col-md-12">
            <ul class="media-list">
                <li class="media" ng-repeat="detail in dish">
                    <div class="media-left media-middle">
                        <a href="#"><img ng-src="{{detail.image}}"></a>
                    </div>
                    <div class="media-body">
                        <h2 class="media-heading">{{detail.name}} <span class="label label-danger label-xs">{{detail.label}}</span>
                            <span class="badge">{{detail.price}}</span></h2>
                            <p>{{detail.description}}</p>
                    </div>
                </li>
            </ul>
        </div><br>
        <div class="col-md-9 col-md-offset-1">
            <strong style="font-size:15px">Customer Comments  </strong>Sort by: 
            <input type="text" ng-model="sortCriteria"><br>
            <blockquote ng-repeat="dc in dish.comments | orderBy:sortCriteria">
                <p>{{dc.rating}} Stars</p>
                <p>{{dc.comment}}</p>
                <footer>{{dc.author}}, {{dc.date | date}}</footer>
            </blockquote>
        </div>
        <div class="col-md-9 col-md-offset-1" ng-controller="commentFormController">
            <blockquote>
                <p>{{new.rating}} Stars</p>
                <p>{{new.comment}}</p>
                <footer>{{new.author}}, {{new.date | date}}</footer>
            </blockquote>
        </div>

    var app = angular.module('confusionApp',[]);
    app.controller('dishDetailController',['$scope', function($scope) {
        var dish=[{
                      name:'Uthapizza',
                      image: '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"
                           }
                       ]
                },
                 {
                      name:'Zucchipakoda',
                      image: 'zucchipakoda.png',
                      category: 'appetizer', 
                      label:'',
                      price:'1.99',
                      description:'Deep fried Zucchini coated with mildly spiced Chickpea flour batter accompanied with a sweet-tangy tamarind sauce.',
                       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"
                           }
                       ]
                 }];
              }]);

正如在注释中提到的,您需要将注释循环移动到dish:

的第一个循环中

angular.module('MyApp', []).controller('Controller', function($scope) {
  $scope.dish = [{
    name: 'Uthapizza',
    image: 'http://img-fotki.yandex.ru/get/68630/318046335.7/0_168276_bd9041f4_orig.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"
    }]
  }, {
    name: 'Zucchipakoda',
    image: 'http://aravindyeluripati.com/dist/images/zucchipakoda.png',
    category: 'appetizer',
    label: '',
    price: '1.99',
    description: 'Deep fried Zucchini coated with mildly spiced Chickpea flour batter accompanied with a sweet-tangy tamarind sauce.',
    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>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<div ng-app="MyApp">
  <div ng-controller="Controller">
    <div class="col-md-12">
      <ul class="media-list">
        <li class="media" ng-repeat="detail in dish">
          <div class="media-left media-middle">
            <a href="#"><img ng-src="{{detail.image}}"></a>
          </div>
          <div class="media-body">
            <h2 class="media-heading">{{detail.name}} <span class="label label-danger label-xs">{{detail.label}}</span>
                            <span class="badge">{{detail.price}}</span></h2>
            <p>{{detail.description}}</p>
          </div>
          <br>
          <div class="col-md-9 col-md-offset-1">
            <strong style="font-size:15px">Customer Comments  </strong>Sort by:
            <input type="text" ng-model="sortCriteria">
            <br>
            <blockquote ng-repeat="dc in detail.comments | orderBy:sortCriteria">
              <p>{{dc.rating}} Stars</p>
              <p>{{dc.comment}}</p>
              <footer>{{dc.author}}, {{dc.date | date}}</footer>
            </blockquote>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

上面的代码示例应该可以做到这一点,只要确保你的样式仍然是好的。

我将<blockquote ng-repeat="dc in detail.comments | orderBy:sortCriteria">节点移动到<li class="media" ng-repeat="detail in dish">中,因为detail变量仅在其内部可用。

我想也许你想把所有的标记放在ng-repeat中,否则你怎么知道哪个菜被给予了新的评级/评论?所以放一个div,它将包含所有的标记,并把ng-repeat .

<div ng-repeat="detail in dish">   
   <div class="col-md-12">
        <ul class="media-list">
            <li class="media">
                <div class="media-left media-middle">
                    <a href="#"><img ng-src="{{detail.image}}"></a>
                </div>
                <div class="media-body">
                    <h2 class="media-heading">{{detail.name}} <span class="label label-danger label-xs">{{detail.label}}</span>
                    <span class="badge">{{detail.price}}</span></h2>
                    <p>{{detail.description}}</p>
                </div>
            </li>
        </ul>
    </div><br>
    <div class="col-md-9 col-md-offset-1">
        <strong style="font-size:15px">Customer Comments  </strong>Sort by: 
        <input type="text" ng-model="sortCriteria"><br>
        <blockquote ng-repeat="dc in dish.comments | orderBy:sortCriteria">
            <p>{{dc.rating}} Stars</p>
            <p>{{dc.comment}}</p>
            <footer>{{dc.author}}, {{dc.date | date}}</footer>
        </blockquote>
    </div>
    <!--This way you can have the dish to add to the new comment-->
    <!--otherwise you will not know to with dish was the new comment/rat-->
    <!--given to.-->
    <div class="col-md-9 col-md-offset-1" ng-controller="commentFormController">
        <blockquote>
            <p>{{new.rating}} Stars</p>
            <p>{{new.comment}}</p>
            <footer>{{new.author}}, {{new.date | date}}</footer>
        </blockquote>
    </div>
</div>
相关文章: