[英]AngularJS only show first date div in loop (with updating array object)
我试图将一个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数组也会使用内部拼接功能每隔几秒进行一次(因为它增长)(请记住)。
<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可能会更有弹性。 看一下angular-filter https://github.com/a8m/angular-filter
您需要与前一天的价值相匹配
<div ng-repeat="item in listtrail">
<div ng-if='listtrail[$index -1].day != item.day'>{{item.day}}</div>
<div>{{item.timestamp}}</div>
</div>
你需要按照一天的顺序保存你的记录:)
看到这个jsFiddle
我有与其他两个相同的答案,但附加检查$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>
不检查似乎不会导致错误,但它会冒犯我的敏感性。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.