Preventing duplicate values in an ng-repeat (AngularJS)

Question

I'm listing a load of sports fixtures via ng-repeat, but I only want to show the date value on its first occurrence. Additionally, I want to contain this date value inside a div, with an <hr> tag.

I'm guessing I should apply an ng-if to the tag, and set the corresponding function to evaluate to true if it the first occurrence of that value in the getFixtures array. I'm not quite sure how to do this though, or if it is indeed possible.

HTML

<div class="fixture" ng-repeat="fixture in getFixtures">

    <div ng-if="doNotDuplicate()">  
       <h4>{{fixture.formatted_date}}</h4>
       <hr>
    </div>

    <div layout="row" style="max-width: 450px; margin: 0 auto;">
        <div class="fixtureteam" flex="40" style="text-align: right;">
            <h2>{{fixture.localteam_name | fixturesAbbreviate}}<span class="flag-icon flag-icon-{{fixture.localteam_id}} md-whiteframe-1dp" style="margin: 0 0 0 8px;"></span></h2>
        </div>

        <div flex="20" layout-align="center center" style="text-align: center;"><h2>{{fixture.time}}</h2></div>

        <div class="fixtureteam" flex="40" style="text-align: left;">
            <h2><span class="flag-icon flag-icon-{{fixture.visitorteam_id}} md-whiteframe-1dp" md-whiteframe="1dp" style="margin: 0 8px 0 0;"></span>{{fixture.visitorteam_name | fixturesAbbreviate}}</h2>
        </div>
    </div>

</div>

---

VIEW (desired outcome)

1st June

---

Fixture A
Fixture B
Fixture C

2nd June

---

Fixture D
Fixture E

4th June

---

Fixture F
Fixture G

---

Any help/suggestions will be massively appreciated.

Answer 1

You can do something like:

<div class="fixture" ng-repeat="item in getFixtures | groupByDate">
    <div>  
       <h4>{{item.date}}</h4>
    </div>
    <div ng-repeat="fixture in item.fixtures">
        ...
        // display fixture info
        ...
    </div>
</div>

where groupByDate is custom filter (as an option) to group fixtures by date.

EDIT:

You can create your own filter or you can try to use already existed third-party filter from angular-filter module.

There you can find the groupBy filter and use it like:

JS

$scope.players = [
  {name: 'Gene', team: 'alpha'},
  {name: 'George', team: 'beta'},
  {name: 'Steve', team: 'gamma'},
  {name: 'Paula', team: 'beta'},
  {name: 'Scruath', team: 'gamma'}
];

HTML

<ul>
  <li ng-repeat="(key, value) in players | groupBy: 'team'">
    Group name: {{ key }}
    <ul>
      <li ng-repeat="player in value">
        player: {{ player.name }}
      </li>
    </ul>
  </li>
</ul>
<!-- result:
  Group name: alpha
    * player: Gene
  Group name: beta
    * player: George
    * player: Paula
  Group name: gamma
    * player: Steve
    * player: Scruath

---

Hope it will help.