您好我使用AngularJs，我必须显示一个对象结构中包含的几个数组，如下所示：
$scope.familiesReport = {
fathersAndChildren : [
{
name: "John",
surname: "Doe",
address: "Fake Street 123",
hobbies: [
{
activity: "fishing",
preferredOn: "Sunday"
},
{
activity: "grappling",
preferredOn: "Thursday"
},
{
activity: "meditating",
preferredOn: "Monday"
}
],
familySize: 2,
familyMembers: [
{
name: "John"
},
{
name: "Carl"
}
]
},
{
name: "Carl",
surname: "Doe",
address: "Fake Street 123",
hobbies: [
{
activity: "reading",
preferredOn: "Tuesday"
},
{
activity: "swimming",
preferredOn: "Friday"
}
],
familySize: 0,
familyMembers: 0
},
{
name: "James",
surname: "Dwight",
address: "False Street 234",
hobbies: [
{
activity: "footing",
preferredOn: "Sunday"
},
{
activity: "driving",
preferredOn: "Tuesday"
},
{
activity: "eating",
preferredOn: "Monday"
}
],
familySize: 0,
familyMembers: 0
},
{
name: "Juan",
surname: "Derrick",
address: "Faint Street 345",
hobbies: [
{
activity: "walking",
preferredOn: "Sunday"
},
{
activity: "praying",
preferredOn: "Monday"
}
],
familySize: 0,
familyMembers: 0
},
{
name: "Jim",
surname: "Delano",
address: "Phony Street 456",
hobbies: [
{
activity: "cooking",
preferredOn: "Monday"
},
{
activity: "repairing",
preferredOn: "Thursday"
}
],
familySize: 0,
familyMembers: 0
},
{
name: "Jacob",
surname: "Dolan",
address: "Foo Street 567",
hobbies: [
{
activity: "snorkling",
preferredOn: "Friday"
},
{
activity: "playing",
preferredOn: "Monday"
},
{
activity: "chatting",
preferredOn: "Wednsday"
}
],
familySize: 0,
familyMembers: 0
},
{
name: "Jamal",
surname: "Downey",
address: "Fuu Street 123",
hobbies: [
{
activity: "diving",
preferredOn: "Tuesday"
},
{
activity: "smoking",
preferredOn: "Sunday"
}
],
familySize: 0,
familyMembers: 0
},
];
}
父亲和孩子都是同一类型的对象，现在这个事实既不能改变整个数组结构。
创建此数组是为了遵守一条规则：如果父亲有一些孩子，他们就会被放置在数组中，此外如果他有familySize: 2，则意味着他只有一个孩子;最终，所有孩子必须拥有familySize: 0和familyMembers: 0。
总而言之，在这个例子中，只有约翰只有一个孩子，卡尔，而其他父亲没有孩子。
我的目标
我需要一个ng-repeat来显示家庭单位，所以当一个父亲有一个孩子时，两个孩子都必须在同一个家庭单位中显示：
FAMILY: Doe ADDRESS: Fake Street 123
________________________________________
| John prefers fishing on Sunday |
| and grappling on Thursday |
| and meditating on Monday |
| |
| CHILDREN |
| Carl prefers reading on Tuesday |
| and swimming on Friday |
|_______________________________________|
FAMILY: Dwight ADDRESS: False Street 234
________________________________________
| James prefers footing on Sunday |
| and driving on Tuesday |
| and eating on Monday |
|_______________________________________|
FAMILY: Derrick ADDRESS: Faint Street 345
________________________________________
| Juan prefers walking on Sunday |
| and praying on Tuesday |
|_______________________________________|
FAMILY: Delano ADDRESS: Phony Street 456
________________________________________
| Jim prefers cooking on Monday |
| and repairing on Thursday |
|_______________________________________|
FAMILY: Dolan ADDRESS: Foo Street 567
________________________________________
| Jacob prefers snorkling on Friday |
| and playing on Monday |
| and chatting on Wednsday |
|_______________________________________|
FAMILY: Downey ADDRESS: Fuu Street 123
________________________________________
| Jamal prefers diving on Tuesday |
| and smoking on Sunday |
|_______________________________________|
问题
在ng-repeat当我找到一个有孩子的父亲时，就像约翰一样，我无法弄清楚如何在同一个家庭单元中与他的孩子一起出现，然后从第一个家庭单元恢复循环他所有家庭成员之后的项目。
请记住，我无法遍历
familyMembers属性， 因为我将失去必须的hobby属性信息 也显示出来。
斗争
是真的。
您对如何实现目标有任何建议吗？
主要编辑：
因为我被要求提供一些HTML（我可能会因为我的问题的复杂性更新而无法写，但我很难做到 ）我再次看了一下我试图＆＃34; mime＆＃34;在这里，不幸的是我不得不在我的问题中进行一些重大编辑。
对不起。
答案 0 :(得分：2)
这是你怎么做的;基本上你需要按家庭分组你的记录。我使用了underscore的groupBy函数。然后我使用key,value ng-repeat结构迭代通过下划线groupBy函数创建的对象。
$scope.families = _.groupBy($scope.fathersAndChildren, function(fatherAndChildren) {
return fatherAndChildren.surname;
});
angular.module("myApp", []).controller("myCtrl", function($scope) {
$scope.familiesReport = {
fathersAndChildren: [{
name: "John",
surname: "Doe",
address: "Fake Street 123",
hobbies: [{
activity: "fishing",
preferredOn: "Sunday"
}, {
activity: "grappling",
preferredOn: "Thursday"
}, {
activity: "meditating",
preferredOn: "Monday"
}],
familySize: 2,
familyMembers: [{
name: "John"
}, {
name: "Carl"
}]
}, {
name: "Carl",
surname: "Doe",
address: "Fake Street 123",
hobbies: [{
activity: "reading",
preferredOn: "Tuesday"
}, {
activity: "swimming",
preferredOn: "Friday"
}],
familySize: 0,
familyMembers: 0
}, {
name: "James",
surname: "Dwight",
address: "False Street 234",
hobbies: [{
activity: "footing",
preferredOn: "Sunday"
}, {
activity: "driving",
preferredOn: "Tuesday"
}, {
activity: "eating",
preferredOn: "Monday"
}],
familySize: 0,
familyMembers: 0
}, {
name: "Juan",
surname: "Derrick",
address: "Faint Street 345",
hobbies: [{
activity: "walking",
preferredOn: "Sunday"
}, {
activity: "praying",
preferredOn: "Monday"
}],
familySize: 0,
familyMembers: 0
}, {
name: "Jim",
surname: "Delano",
address: "Phony Street 456",
hobbies: [{
activity: "cooking",
preferredOn: "Monday"
}, {
activity: "repairing",
preferredOn: "Thursday"
}],
familySize: 0,
familyMembers: 0
}, {
name: "Jacob",
surname: "Dolan",
address: "Foo Street 567",
hobbies: [{
activity: "snorkling",
preferredOn: "Friday"
}, {
activity: "playing",
preferredOn: "Monday"
}, {
activity: "chatting",
preferredOn: "Wednsday"
}],
familySize: 0,
familyMembers: 0
}, {
name: "Jamal",
surname: "Downey",
address: "Fuu Street 123",
hobbies: [{
activity: "diving",
preferredOn: "Tuesday"
}, {
activity: "smoking",
preferredOn: "Sunday"
}],
familySize: 0,
familyMembers: 0
}, ]
}
$scope.families = _.groupBy($scope.familiesReport.fathersAndChildren, function(fatherAndChildren) {
return fatherAndChildren.surname;
});
})<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<html ng-app="myApp">
<body ng-controller="myCtrl">
<div ng-repeat="(key, value) in families">
<b>Family Name: </b>{{key}} -- Address: {{value[0].address}}
<div ng-repeat="familyMember in value">
<div ng-show="familyMember.familySize > 1">
{{familyMember.name}} prefers <span ng-repeat="hobby in familyMember.hobbies">{{hobby.activity}} on {{hobby.preferredOn}} <span ng-show="$index!== familyMember.hobbies.length - 1">and </span></span>
<div>CHILDREN</div>
</div>
<div ng-show="familyMember.familySize === 0">
{{familyMember.name}} prefers <span ng-repeat="hobby in familyMember.hobbies">{{hobby.activity}} on {{hobby.preferredOn}} <span ng-show="$index!== familyMember.hobbies.length - 1">and </span></span>
</div>
</div>
</div>
</body>
</html>