2

我有一个带有事件列表的 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;


         }

如果我们不对事件数组应用过滤器或顺序，它会很好用。如果应用了订单/过滤器 - DisplayDate 方法在原始事件数组上进行评估（这是不正确的）。

问题是：

  1. 是否可以在 DisplayDate 方法中访问过滤/排序的事件数组？
  2. 还有其他方法可以显示/隐藏组标题吗？我想我可以应用一些日期分组并有两个嵌套的 ng-repeats 但它看起来更复杂。

谢谢，

4

2 回答 2

1

  1. 这是一个有根据的猜测，但我会说“有困难”

  2. 我绕过它的方式（只是用分页+排序做了类似的事情）：

在控制器中添加：

$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-重复。

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

于 2013-10-30T11:57:47.363 回答
1

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

  1. 添加自定义过滤器：
app.filter("as", function($parse) {
  return function(value, path) {
    return $parse(path).assign(this, value);
  };
});
  1. 对 ng-repeat 应用过滤器
 <div data-ng-repeat="item in Events  | filter:Filter | orderBy:SortBy:SortDesc | as: 'filtered'">...</div>
  1. 过滤数组作为 $scope.filtered 可用，可用于标题显示。它完美地工作。
于 2013-10-31T14:31:37.623 回答