angular group data in ng-repeat

Question

This is a bit difficult to me as i am still new to angular. I have data such as

$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'}
]

then i want to do this in ng-repeat, but want to produce the result as

<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>

how can achieve this?

Similar question: http://stackoverflow.com/a/25342374/1074519 — Walter Chapilliquen - wZVanG, Jun 08 '15 at 04:37
i took a look, i think still unclear that the solution suggested applying to a list, but in my case is a table, i think it is hard to apply to structure — onegun, Jun 08 '15 at 04:51

score 0 · Answer 1 · answered Jun 08 '15 at 06:30

0

you have to split your date and time field first and then you have to bind the data to be displayed in the columns you want, you can use ng-modle to do so or use the double curly brackets to display data "{{ data field }} " databinding link

answered Jun 08 '15 at 06:30

doe

148
4
25

score 0 · Accepted Answer · answered Jun 09 '15 at 01:32

Aight, spent some time on this and think I've got something for you.

As said above, you do need to split your date and time in the controller, which shouldn't be too hard. Your data should look like so.

$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'}
];

Then, your markup should look like this:

<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>

Two key things: you'll need to download the array-filters module:

npm install array-filter

and add it to your markup script dependencies.

The other is that you're using the ng-repeat-start and ng-repeat-end markers that allow you to repeat not a parent element but multiple elements. Because your ending element is also an ng-repeat element, I'd recommend testing on bigger data sets, but I tested this and it creates what you want.

angular group data in ng-repeat

2 Answers2