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

时间:2015-11-11 20:02:37

标签: angularjs ng-repeat ng-hide

我有重复显示即将开展的活动。我想每个月展示一次。有没有办法用月份显示第一个重复项目而另一个没有?

在附加图片中,您将看到重复月份分隔符的当前情况。我只想在那个月一次又一次地显示月份中的所有项目。我怎么能隐藏这些月的重复?

enter image description here

      <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>

1 个答案:

答案 0 :(得分:1)

您可以在ng-repeat上使用groupBy模块的<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> 过滤器,然后使用第二个ng-repeat来循环分组项目。

<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>

Maarten Heideman提供的最终工作代码

Bicycle bike = new RoadBike();