[英]AngularJS ng-repeat over array of objects uniquely
I have an Object with 2 arrays: 我有一个带有2个数组的Object:
mainObject = {
soccer: [],
hockey: []
}
Each of the arrays contain a different amount of objects: 每个数组都包含不同数量的对象:
sportObject = {
soccer: [{equipment: "cleats"}, {shirt: "jersey"}, {team: "arsenal"}],
hockey: [{equipment: "skates"}]
}
I print each object onto the page using a list, separated by "sport": 我使用列表将每个对象打印到页面上,用“sport”分隔:
<ul ng-repeat="(sport, value) in sportObject">
<li>{{sport}}</li> // Prints "soccer" or "hockey"
<li ng-repeat="item in sportObject"></li> // <-- one of my failed attempts
</ul>
I want to print each of the object info into an li
under the correct sport name. 我想在正确的运动名称下将每个对象信息打印成li
。
For example, there are a total of 4 objects, soccer has 3, hockey has 1. 例如,共有4个对象,足球有3个,曲棍球有1个。
Currently, each item gets repeated under both sports. 目前,每个项目在两项运动下都会重复出现。 So both sports have 4, items. 所以这两项运动都有4个项目。 How can I use ng-repeat to only print equipment that falls under the correct sport title? 如何使用ng-repeat仅打印属于正确运动标题的设备?
The result should look like: 结果应如下所示:
Soccer 足球
Hockey 曲棍球
The following should do the trick: 以下应该做的伎俩:
<ul ng-repeat="(sport, value) in sportObject">
<li>{{sport}}
<ul>
<li ng-repeat="detail in value">
<span ng-repeat="(detailkey, detailvalue) in detail">
{{detailkey}} - {{detailvalue}}
</span>
</li>
</ul>
</li>
</ul>
Note that you have to do 3 iterations: 请注意,您必须进行3次迭代:
And here is a working version for you: https://plnkr.co/edit/WKNRU6U6xwGgKRq4chhT?p=preview 这是一个适合您的工作版本: https : //plnkr.co/edit/WKNRU6U6xwGgKRq4chhT?p = preview
You can use key
and value
within the ng-repeat
directive, as shown below. 您可以在ng-repeat
指令中使用key
和value
,如下所示。
<ul ng-controller="SportController">
<strong>Soccer</strong>
<li ng-repeat="(key,value) in sportObject.soccer">
{{value}}
</li>
<strong>Hockey</strong>
<li ng-repeat="(key,value) in sportObject.hockey">
{{value}}
</li>
</ul>
Additional wireup: 额外的连线:
var app = angular.module("sportApp", []);
app.controller("SportController", function($scope) {
$scope.sportObject = {
soccer: [{equipment: "cleats"}, {shirt: "jersey"}, {team: "arsenal"}],
hockey: [{equipment: "skates"}]
}
});
I have created a plunkr here for you to view and edit: 我在这里创建了一个plunkr供您查看和编辑:
You can also nest the ng-repeat
directive. 您还可以嵌套ng-repeat
指令。
<ul ng-controller="SportController">
<li ng-repeat="(sportName, sportValue) in sportObject">
{{sportName}}
<ul ng-repeat="(key, val) in sportValue">
<li>{{val}}</li>
</ul>
</li>
</ul>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.