javascript - AngularJS 只在循环中显示第一个日期 div(更新数组对象)

Question

我正在尝试将 javascript 对象渲染到 Angular ~1.2.24 中的模板

只应显示第一次出现的 item.day。

示例对象:

$scope.listtrail = [{
    day: '2015-08-15',
    id: 123,
    timestamp: '2015-08-15 12:23:12'
},{
    day: '2015-08-15',
    id: 122,
    timestamp: '2015-08-15 12:43:34'
},{
    day: '2015-08-15',
    id: 121,
    timestamp: '2015-08-15 14:12:56'
},{
    day: '2015-08-14',
    id: 120,
    timestamp: '2015-08-14 11:12:09'
},{
    day: '2015-08-14',
    id: 118,
    timestamp: '2015-08-14 10:11:02'
}]

示例模板部分:

<div ng-repeat="item in listtrail">
    <div>{{item.day}}</div>
    <div>{{item.timestamp}}</div>
</div>

示例模板输出目标:

<div>
    <div>2015-08-15</div>
    <div>2015-08-15 12:23:12</div>
</div>
<div>
    <div>2015-08-15 12:43:34</div>
</div>
<div>
    <div>2015-08-15 14:12:56</div>
</div>
<div>
    <div>2015-08-14</div>
    <div>2015-08-14 11:12:09</div>
</div>
<div>
    <div>2015-08-14 10:11:02</div>
</div>

请注意，javascript 数组也会每隔几秒使用内部拼接函数(请牢记)预先设置(随着它的增长)。

Answer 1

不错的解决方案是使用 angular-filter模块。 它可以被编码为:

<div ng-app="app">
  <div ng-controller="TestCtrl">
    <div ng-repeat="(key, value) in listtrail | groupBy: 'day'">
        <div>{{ key }}</div>
        <div ng-repeat="item in value">{{item.timestamp}}</div>
    </div>
  </div>
</div>

看看JSFiddle