如何在 ng-repeat 中添加月份分隔符？

Question

我有一个显示即将进行的活动的 ng 重复。我想每个月显示一次。有没有办法显示第一个带有月份的重复项目而另一个没有？

在附加图片中，您将看到当前存在重复月份分隔符的情况。我只想在该月显示该月一次，然后显示该月的所有项目。我怎样才能隐藏这些月份的重复项？

      <ul class="list">
      <li ng-repeat="item in calendar | filter:searchText" >
      <div class="item item-divider" ng-hide="what to do here?">{{item.month}}</div>

      <div class="item item-text-wrap">
          <span>{{item.day}}</span>
          <span>{{item.title}}</span>
      </div>

      </li>
  </div>

Answer 1

您可以在 ng-repeat 上使用 angular.filter 模块的 groupBy 过滤器，然后使用第二个 ng-repeat 循环遍历分组的项目。

<ul class="list" ng-repeat="(key, value) in calendar | groupBy: 'month'">
   <li>{{ key }}</li>
   <li ng-repeat="item in value | filter:searchText" >
       <div class="item item-divider" ng-hide="what to do here?">{{item.month}}</div>
       <div class="item item-text-wrap">
          <span>{{item.day}}</span>
          <span>{{item.title}}</span>
       </div>
   </li>
</ul>

Maarten Heideman 提供的最终工作代码

<ul class="list" ng-repeat="maand in agenda | groupBy: 'maand' : 'agendamaand'"> 
    <div class="item item-divider">{{ maand.maand }}</div> 
    <li ng-repeat="item in maand.items | filter:searchText"> 
        <div class="item item-text-wrap"> 
            <span class="time prio-{{item.prio}}">{{item.start}}</span> 
            <span>{{item.title}}</span> 
        </div> 
    </li> 
</ul>