AngularJS NG-重复列意识到表

-1

我有以下型号：Item：{数据：字符串，日程安排：日期时间，类别：字符串}AngularJS NG-重复列意识到表

我需要通过以下方式来显示这个数据的报告：

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

所以我需要编译和项目的名单中筛选到的时间范围和显示基于类别的总数。我怎样才能做到这一点与角度，并告诉我在哪个列（因此选择正确的值来显示），因为类别是动态的。

编辑：该表将显示所有项目的摘要。因此，您需要将所有项目编译成Time Range,# In Category 1,# In Category 2,# In No Category。唯一会由我设定的是时间范围。

我打算将这些数据存储在一个散列映射中，其中的键是类别名称，但我需要知道我处于哪个列，因为类别是动态的。类别来自数据库（用户放入这些项目）。

来源

2016-01-21 user3186332

你能以有意义的格式显示数据吗？你所说的没有映射到你想要输出的东西...... – epascarello

不清楚这些动态类别的来源是什么，或者是什么编译到日期范围真正需要的。提供更好的数据样本和预期结果 – charlietfl

即使编辑了问题，也没有足够的信息来指出究竟需要完成什么 – charlietfl

基本上你需要做两件事。按类别分组列表并显示分组列表。请参阅JsFiddle：https://jsfiddle.net/vittore/mmvxbcjx/4/

为了组列表，您可以使用array.reduce。为方便数据的结构将是哈希散列，即（基于时间还有一个小时步说你是分组日期时间。）

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

为了获得结构一样，与降低你会做：

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; 
}, {})

后，你已经得到了你需要做的嵌套NG重复使用的角度所需的结构：

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

来源

2016-01-21 01:52:06 vittore

AngularJS NG-重复列意识到表

回答

相关问题