我有一个嵌套的各种细节列表,并希望使用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
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>
相关文章:
- 按我自己的类克隆另一个元素的内容和顺序
- 从我的控制器返回一个不同于200的代码以触发ajax错误,这被认为是一种好的做法吗
- 我的shareService在angular 2中发送值工作正常,但当我渲染我的另一个组件时,会获得默认值
- 通过另一个php应用程序将我的项目推送到Github存储库中
- 如何创建更好的方式来维护基于我的代码访问的最后一个页面
- 我可以通过JQuery将CSS类交换为一个特殊的元素集吗
- 错误:$injector:modulerr模块错误(我的第一个SPA应用程序)
- jQuery-将列表项的一个元素移动到同一项的另一个元素中+对我的列表中的每个项执行此操作
- 我可以让我的Ajax调用引起一个“;进行中”;光标
- 如何建立一个网页,检查我的路由器网络接口是否可以访问
- 为什么这个jQuery可以作为一个小提琴工作,但在我的网页上没有
- 为什么我使用javascript获得了一个无限的for循环
- 我需要一个jQuery函数来只工作在700px以上的屏幕大小,无法在我的代码中发现错误
- javascript window.location在检查firebug时给了我一个错误的url路径
- 当我的所有 Ng-from 都有效时启用一个按钮
- 当我JSON.stringfy(对象)时,我得到一个疯狂的字符串作为值
- 如何给一个我的图像点击事件/动画
- 如何找出哪个图像在一个我的变量被分配给
- 为什么只有一个我的Riot.js标签呈现
- 为什么$.每个只显示一个我的小胡子模板