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

即可

Answer 2

<div ng-repeat="item in listtrail">
  <div ng-if="listtrail[$index-1].day != item.day">{{item.day}}</div>
  <div>{{item.timestamp}}</div>
 </div>

这应该可以正常工作：https://jsfiddle.net/2o5nwy2r/5/

然而，使用$ filter在ng-repeat上执行某种groupBy可能会更有弹性。看看角度过滤器https://github.com/a8m/angular-filter

Answer 3

您需要与前一天的价值相匹配

<div ng-repeat="item in listtrail">
  <div ng-if='listtrail[$index -1].day != item.day'>{{item.day}}</div>
  <div>{{item.timestamp}}</div>
</div>

您需要按照一天的顺序保存记录:)

请参阅此jsFiddle

Answer 4

我和其他两个人有相同的答案，但额外检查了$index == 0：

<div ng-app>
  <div ng-controller="TestCtrl">
    <div ng-repeat="item in listtrail">
      <div ng-if="$index == 0 || listtrail[$index-1].day != item.day" ng->{{item.day}}</div>
      <div>{{item.timestamp}}</div>
    </div>
  </div>
</div>

不检查似乎不会导致错误，但它会冒犯我的感情。

https://jsfiddle.net/2o5nwy2r/6/

AngularJS只显示循环中的第一个日期div（更新数组对象）

4 个答案: