Question

我有一个带有事件列表的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"><br /></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但它看起来更复杂。

谢谢，

Answer 1

这是一个有根据的猜测，但我会说“有困难”
我绕过它的方式（只是用分页+排序做了类似的事情）：

在控制器中添加：

$scope.EventsPreProccessed = [];

$scope.$watch('Events', function() {
  // here goes code that generates EventsPreProccessed into a form convenient for use in ng-repeat 
});

每次您的初始事件集发生更改（通过http更新或由用户在UI中修改），或者如果您需要对它们进行排序或分页 - 观察者会被调用并更新您的EventsPreProccessed - 并且该变量可以很容易地形成在ng-repeat中使用。

这是不理想的，因为在控制器中有表现逻辑并不优雅。我知道，但这是我知道做它的唯一方法。

Answer 2

我在这里找到了一个可能的解决方案： angularjs-how-to-get-an-ngrepeat-filtered-result-reference

添加自定义过滤器：

app.filter("as", function($parse) {
  return function(value, path) {
    return $parse(path).assign(this, value);
  };
});

将过滤器应用于ng-repeat

 <div data-ng-repeat="item in Events  | filter:Filter | orderBy:SortBy:SortDesc | as: 'filtered'">...</div>

过滤后的数组以$ scope.filtered形式提供，可用于标题显示。它完美无缺。

AngularJs在ng-repeat中显示/隐藏子标题

2 个答案: