CODEWITHSUNDEEP
angularjsangularjs-ng-repeatng-hide
Maarten Heideman
Maarten Heideman

Reputation: 595

How add month divider in ng-repeat?

I have a ng repeat that displays upcoming activities. I want to show each month once. Is there a way to show the first repeated item with month and the other without?

In the attach image you'll see the current situation with duplicate month dividers. I only want to show the Months once and down that month all the items in that month. How i can hide these month duplicates?

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>

Upvotes: 1

Views: 455

Answers (1)

Tristan
Tristan

Reputation: 3321

You can use groupBy filter of angular.filter module on ng-repeat and then use a second ng-repeat to loop through the grouped items.

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

Final working code provided by 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>

Upvotes: 1

Related Questions