我有一个带有事件列表的angularJS控制器 . 每个活动都有日期和评论 . 我正在显示一系列事件,并希望隐藏相同的日期 .
例如,如果我有:
{Date: "10/1/2013", Comment= "First Event"},
{Date: "10/1/2013", Comment= "Second Event"},
{Date: "10/2/2013", Comment= "Third Event"}
输出应该是:
10/1/2013 Tuesday
First Event
Second Event
10/2/2013 Wednesday
Third Event
这是我的模板:
<div data-ng-repeat="item in Events | filter:Filter | orderBy:SortBy:SortDesc">
<div data-ng-show="item.DisplayDate($index)" class="eventDate">{{ item.Date | date: 'M/dd/yyyy EEEE' }}</div>
<div class="comment" ng-bind-html-unsafe="item.Comment"></div>
<div style="clear:both">
</div>
</div>
我为每个事件项添加了一个函数,用于比较事件日期,如果上一个事件具有相同的日期,则返回false(隐藏事件日期div) .
$scope.DisplayDate = function (idx) {
if (idx > 0) {
//get previous event
var previousEvt = $scope.Events[idx - 1];
//if previous event has the same date as this one - don't show subheader
if (previousEvt.Date.getTime() == $scope.Events[idx].Date.getTime())
return false;
else
return true;
}
else
return true;
}
如果我们不对Events数组应用过滤器或顺序,它会很有用 . 如果应用了顺序/过滤器 - 在原始事件数组(不正确)上评估DisplayDate方法 .
问题是:
-
是否可以在DisplayDate方法中访问过滤/排序的事件数组?
-
有没有其他方法来显示/隐藏组头?我想我可以应用一些Date灌浆并且有两个嵌套的ng-repeats但它看起来更复杂 .
谢谢,
2 回答
这是一个有根据的猜测,但我会说“有困难”
我绕过它的方式(只是用分页排序做了类似的事情):
在控制器中添加:
每当您的初始事件集发生更改(通过http更新或由UI中的用户修改),或者您需要对它们进行排序或分页时 - 观察者会被调用并更新您的EventsPreProccessed - 并且可以形成该变量以便在您的内容中轻松使用NG-重复 .
这并不理想,因为在控制器中有表现逻辑并不优雅 . 我知道,但这是我知道做它的唯一方法 .
我在这里找到了一个可能的解决方案:angularjs-how-to-get-an-ngrepeat-filtered-result-reference