在 Angular 中循环列表并打印中间标题，重用结构

Question

我有一个JSON对象，看起来像这样：

people = {
rightHanded :[
    {"name":bob,
     "age": 23
    },
    {"name":dave,
     "age": 20
    }
],
leftHanded :[
    {"name":sarah,
     "age": 23
    },
    {"name":lisa,
     "age": 20
    }
]};

我想为这两种人重用相同的结构

<tr><td>Right handed</td><tr>
<tr ng-repeat="person in people.rightHanded">
    <td>person.name</td>
    <td>person.age</td>
</tr>
<tr><td>Left handed</td><tr>
<!-- Don't want to repeat the same structure -->
<tr ng-repeat="person in people.leftHanded">
    <td>person.name</td>
    <td>person.age</td>
</tr>

我想要这样的结构：

Right handed
bob            23
dave           20
Left handed
sarah          23
lisa           20

我可以将值放在 persontag 中，但是我只能写一次"左撇子"行吗？

Answer 1

JSON -

经过调整以与 ng-repeat 配合使用：

people = [
  { 
    title: "Right handed",
    list: [
      {"name": "bob", "age": 23 },
      {"name": "dave", "age": 20 }
    ]
  },
  {
    title: "Left handed",
    list: [
      { "name": "sarah", "age": 23 }, 
      { "name": "lisa", "age": 20 }
    ]
  }
];

模板：

<tr ng-repeat-start="x in people">
  <td>{{x.title}}</td>
  <td></td>
</tr>
<tr ng-repeat="p in x.list" ng-repeat-end>
  <td>{{p.name}}</td>
  <td>{{p.age}}</td>
</tr>

见波兰兹罗里克尔

Answer 2

为此，

您需要创建自定义过滤器来展平数组。

标记

  <tr ng-repeat="person in people | customFilter: 'rightHanded'">
    <td ng-bind="person.name"></td>
    <td ng-bind="person.age"></td>
  </tr>

滤波器

app.filter('customFilter', function($filter) {
  return function(values, side) {
    var returnValue = [];
    angular.forEach(values, function(val, index) {
      angular.forEach(val, function(v, i) {
        v['side'] = index; //here you inserting side
        returnValue.push(v)
      });
    });
    return $filter('filter')(returnValue, {side: side}, true);
  }
});

工作普伦克