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

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

2 years ago

  • 这是一个有根据的猜测,但我会说“有困难”

  • 我绕过它的方式(只是用分页排序做了类似的事情):

在控制器中添加:

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

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

2 years ago

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

  • 添加自定义过滤器:

app.filter(“as”,function($ parse){
返回函数(值,路径){
return $ parse(path).assign(this,value);
};
});

  • 将过滤器应用于ng-repeat

<div data-ng-repeat =“事件中的项目|过滤器:过滤器| orderBy:SortBy:SortDesc | as:'filtered'”> ... </ div>

  • filtered数组以$ scope.filtered形式提供,可用于 Headers 显示 . 它完美地运作 .