通过angularjs在单个表格的同一行中显示并行子元素

Question

我的 JSON 格式：

[
 {  
  'name': 'George',
  'age': '44',
  'children': [
     {
       'name': 'Jack',
       'age': 16,
     },
     {
       'name' : 'Amy',
       'age': 13
     } ],
  'nephew' : [
     {
       'name':'jj',
       'age':11
     }, 
     {
       'name':'kk', 
       'age':12 
     } ]
 }, 
 {
    'name': 'Jimmy',
    'age': 38,
    'children': [
        {
          'name': 'Max',
          'age': 7              
        },
        {
          'name': 'Lily',
          'age': 5
        } ],
    'nephew' : [
        {
          'name':'xx',
          'age':41
        }, 
        { 
          'name':'yy', 
          'age':42 
        } ] 
 }
]; 

在表 1 中，我在第 1 个 TR 中显示了 geoge,44，在第 2 个 TR 中显示了 jimmy,38。然后我需要在表 2 中显示，其中应包含：儿童的数据和 NEPHEW 的单行数据。即第一排的jack,16, Amy, 13, jj, 11, kk, 12。所以在第二行我需要展示吉米的孩子和侄子。

我刚刚获得了显示一个子元素（CHILDREN）的代码，例如“x in person.children”，但也无法在单行中实现并行子元素（NEPHEW）。

请提供您的想法。

重新编辑：更新 json 格式：

[
 {
 'name': 'George',
 'age': '44',
 'children': [
    {
        'name': 'Jack',
        'age': 'jack-16',
        'month': 'jack-june'
    },
    {
        'name': 'Amy',
        'age': 'amy-13',
        'month': 'amy-jan'
    }],
 'nephew': [
    {
        'name': 'jj',
        'age': 'jj-11',
        'year': 'jj-2000'
    },
    {
        'name': 'kk',
        'age': 'kk-12',
        'year': 'kk-1995'
    }]
  },
 {
 'name': 'Jimmy',
 'age': 38,
 'children': [
     {
         'name': 'Max',
         'age': 'max-7',
         'month': 'max-nov'
     },
     {
         'name': 'Lily',
         'age': 'lily-5',
         'month': 'lily-dec'
     }],
 'nephew': [
     {
         'name': 'xx',
         'age': 'xx-41',
         'year': 'xx-2005'
     },
     {
         'name': 'yy',
         'age': 'yy-42',
         'year': 'yy-2003'
     }]
  }
 ];

我需要 table-1 和 table-2 来显示这样的数据：

.

我相信只有自定义过滤器才能实现这种格式，但我做不到。请帮忙。

Answer 1

试试这个：

在您的控制器中：

    $scope.people =  [
 {
     'name': 'George',
     'age': '44',
     'children': [
        {
            'name': 'Jack',
            'age': 16,
        },
        {
            'name': 'Amy',
            'age': 13
        }],
     'nephew': [
        {
            'name': 'jj',
            'age': 11
        },
        {
            'name': 'kk',
            'age': 12
        }]
 },
 {
     'name': 'Jimmy',
     'age': 38,
     'children': [
         {
             'name': 'Max',
             'age': 7
         },
         {
             'name': 'Lily',
             'age': 5
         }],
     'nephew': [
         {
             'name': 'xx',
             'age': 41
         },
         {
             'name': 'yy',
             'age': 42
         }]
 }
    ];

在您的 HTML 中：

    <table>
    <tr ng-repeat="p in people">
        <td>{{p.name}}</td>
    </tr>
</table>
<table>
    <tr ng-repeat="p in people">
        <td ng-repeat="c in p.children">{{c.name}}</td><td ng-repeat="n in p.nephew">{{n.name}}</td>
    </tr>
</table>

这是您的表格的更新

    <table>
    <tr ng-repeat="p in people">
        <td>{{p.name}}</td><td>{{p.age}}</td><td> <table>
    <tr>
        <th ng-repeat="c in p.children">{{c.name}}</th><th ng-repeat="n in p.nephew">{{n.name}}</th>
    </tr>
    <tr> <td  ng-repeat="c in p.children"><span>{{c.age}}</span><span>{{c.month}}</span></td> <td ng-repeat="n in p.nephew"><span>{{n.age}}</span><span>{{n.month}}</span></td></tr>
</table></td>
    </tr>
</table>

我还更新了Plunker