javascript - 停止 ng-repeat 然后恢复它

Question

您好，我正在使用 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
        },
    ];
}

父亲和 child 都是同一类型的对象，目前这个事实和数组的整个结构都不能改变。

创建这个数组是为了遵循一个规则:如果一位父亲有一些 child ，则将他们放在数组中紧随其后的位置，此外，如果他有 familySize: 2，则意味着他只有1名 child ；最终，所有 child 都必须有 familySize: 0 和 familyMembers: 0。

总而言之，在这个例子中，只有约翰只有 1 个 child 卡尔，而其他父亲则没有 child 。

我的目标

我需要一个 ng-repeat 来显示家庭单位，所以当父亲有 child 时，两个 child 都必须显示在同一个家庭单位中，就像这样:

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 中，当我找到一个有 child 的父亲时，比如 John，我无法弄清楚如何让他和他的 child 在同一个家庭单元中，然后继续循环从所有家庭成员之后的第一项开始。

Keep in mind that I can't loop through the familyMembers property, since I'll lose the hobby property information, which has to be displayed too.

斗争

是真实的。

您对如何实现我的目标有什么建议吗？

MAJOR EDIT:

Since I have been asked to provide some HTML (which I probably won't be able to write since the renewed complexity of my problem, but I'm struggling to make it) I gave a second look to the code I'm trying to "mime" here, and unfortunately I had to make some major edit in my question.

Sorry.

Answer 1

在这里你可以怎么做;基本上你需要按家庭对你的记录进行分组。我使用了 underscore 的 groupBy 函数。然后我使用 ng-repeat 的 key,value 结构来遍历由下划线的 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>