javascript - AngularJS ng-repeat column aware table -

i have following model: item : {data: string, schedule: datetime, category: string}

i need display report of data in following way:

<table>      <tr>        <th>time range</th>        <th>category 1</th>        <th>category 2</th>        <th>no category</th>      </tr>      <tr>        <td>6:00 - 2:30</td>        <td>3</td>        <td>5</td>        <td>7</td>      </tr>  </table>

so need compile , filter list of items time ranges , display totals based on categories. how can accomplish angular , tell column in (and therefore choose right value display) categories dynamic.

edit: table display summary of items. you'll have take items , compile form time range, # in category 1, # in category 2, # in no category. thing set me time ranges.

i plan store data in hash map keys category names, need know column in categories dynamic. categories come database (a user putting these items in).

basically need 2 things. group list category , display grouped list. see jsfiddle: https://jsfiddle.net/vittore/mmvxbcjx/4/

in order group list can use array.reduce. convenient data structure hash of hashes, ie

var hash = {     '6:30': {       category1: 5    } } 

(say grouping datetime based on time hour step.)

in order structure reduce do:

var mylist = [{},....];  $scope.grouped = list.reduce(function(a, d) {   var hours = d.schedule.gethours();    if (!(hours in a)) a[hours] = {}    var timeslot = a[hours]    timeslot[d.category || 'no category' ]  =        1 + ( timeslot[d.category || 'no category'] | 0)    return a; }, {}) 

after you've got desired structure need nested ng-repeat angular:

<tr>   <th>time slot</th>   <th ng-repeat='c in categories'>{{ c }} </th>   <th>no category</th> </tr>  <tr  ng-repeat='(k,v) in grouped'>   <th>{{ k }} : 00</th>   <td ng-repeat='c in categories'>{{ v[c] }} </td>   <td>{{ v['no category'] }}</td> </tr>