Question

我有以下模型：Item：{data：String，schedule：DateTime，category：String}

我需要以下列方式显示此数据的报告：

＆＃13;

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

＆＃13;

因此，我需要将项目列表编译并过滤到时间范围内，并根据类别显示总计。如何通过角度来完成此操作并告诉我所在的列（因此选择正确的值来显示），因为类别是动态的。

编辑：该表格将显示所有项目的摘要。因此，您已将所有项目都编入表格Time Range，# In Category 1，# In Category 2，# In No Category。我唯一要设定的是时间范围。

我计划将这些数据存储在哈希映射中，其中键是类别名称，但我需要知道我所在的列，因为类别是动态的。这些类别来自数据库（将这些项目放入的用户）。

Answer 1

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

要分组列表，您可以使用array.reduce。方便的数据结构将是哈希的散列，即

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

（假设您根据时间以小时步骤对日期时间进行分组。）

为了通过reduce获得类似的结构，你将会这样做：

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

在获得所需的结构后，您需要使用angular：

进行嵌套的ng-repeat

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

AngularJS ng-repeat列感知表

1 个答案: