我有一个包含各种详细信息的嵌套列表，我想使用 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
脚本标签中的变量 'dish' 中有两个列表，每个列表都包含另一个名为 'comments' 的嵌套列表。使用 angularJs （可能是 ng-repeat 指令）我想显示变量 'dish' 中每个项目的媒体标签，然后在下面显示 'blockquotes' 标签中该项目的所有评论，如下所示image。当 'dish' 只有一个项目时我能够做到，但当它有 2 个或更多时我无法做到。请帮助我。我想给每个项目一个 _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"
}
]
}];
}]);
如评论中所述，您需要将评论循环移动到菜品的第一个循环中：
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 中，否则你怎么知道给了一个新的菜 rating/comment？
所以放一个包含所有标记的 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>
脚本标签中的变量 'dish' 中有两个列表，每个列表都包含另一个名为 'comments' 的嵌套列表。使用 angularJs （可能是 ng-repeat 指令）我想显示变量 'dish' 中每个项目的媒体标签，然后在下面显示 'blockquotes' 标签中该项目的所有评论，如下所示image。当 'dish' 只有一个项目时我能够做到，但当它有 2 个或更多时我无法做到。请帮助我。我想给每个项目一个 _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"
}
]
}];
}]);
如评论中所述，您需要将评论循环移动到菜品的第一个循环中：
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 中，否则你怎么知道给了一个新的菜 rating/comment？
所以放一个包含所有标记的 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>