停止重复，然后重新开始

时间：2015-09-01 14:14:55

标签： javascript arrays angularjs loops angularjs-ng-repeat

您好我使用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;在这里，不幸的是我不得不在我的问题中进行一些重大编辑。

     

对不起。

1 个答案:

答案 0 :(得分：2)

这是你怎么做的;基本上你需要按家庭分组你的记录。我使用了underscore的groupBy函数。然后我使用key,value ng-repeat结构迭代通过下划线groupBy函数创建的对象。

$scope.families = _.groupBy($scope.fathersAndChildren, function(fatherAndChildren) {
    return fatherAndChildren.surname;
  });

＆＃13;
＆＃13; 
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;
  });
})
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题