javascript - ng-repeat 中的 Angular 组数据

Question

这对我来说有点困难，因为我对 Angular 还很陌生。我有数据如

$scope.datas =[
    {name:'haha',datetime:'2015-06-06 09:24:34'},
    {name:'taha',datetime:'2015-07-06 19:10:45'},
    {name:'gaga',datetime:'2015-06-06 15:36:14'},
    {name:'lala',datetime:'2015-07-06 04:43:24'}
]

然后我想在 ng-repeat 中执行此操作，但希望产生结果

<table>

<tr><td colspan="2">2015-06-06</td></tr>
<tr><td>09:24:34</td><td>haha</td></tr>
<tr><td>15:36:14</td><td>gaga</td></tr>

<tr><td colspan="2">2015-07-06</td></tr>
<tr><td>19:10:45</td><td>taha</td></tr>
<tr><td>04:43:24</td><td>lala</td></tr>

</table>

如何实现这一目标？

Answer 1

好吧，花了一些时间在这上面，我想我已经为你找到了一些东西。

如上所述，您确实需要在 Controller 中分割日期和时间，这应该不会太难。您的数据应该如下所示。

$scope.datas =[
    {name:'haha',date:'2015-06-06', time: '09:24:34'},
    {name:'taha',date:'2015-07-06', time: '19:10:45'},
    {name:'gaga',date:'2015-06-06', time: '15:36:14'},
    {name:'lala',date:'2015-07-06', time: '04:43:24'}
];

然后，您的标记应如下所示:

<table>
    <tr ng-repeat-start="(key, value) in datas | groupBy : 'date'"><td colspan="2">{{key}}</td></tr>
    <tr ng-repeat-end ng-repeat="time in value">
        <td>{{time.time}}</td><td>{{time.name}}</td>
    </tr>
</table>

两个关键事项:您需要下载数组过滤器模块:

npm install array-filter

并将其添加到您的标记脚本依赖项中。

另一个是您使用 ng-repeat-start 和 ng-repeat-end 标记，它们允许您重复不是父元素而是多个元素。因为您的结束元素也是 ng-repeat 元素，所以我建议在更大的数据集上进行测试，但我对此进行了测试，它创建了您想要的内容。