1

今後の活動を表示する ng の繰り返しがあります。毎月1回は見せたい。最初の繰り返しアイテムを月で表示し、他のアイテムを表示しない方法はありますか?

添付画像では、月の区切りが重複している現在の状況を確認できます。月を一度だけ表示し、その月のすべてのアイテムをその月に表示したい。これらの月の重複を非表示にするにはどうすればよいですか?

ここに画像の説明を入力 

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

1 に答える 1

1

ng-repeat でangular.filtergroupByモジュールのフィルターを使用してから、2 番目の 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>
于 2015-11-11T20:13:52.943 に答える