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.

Do you mean write a separate ng-repeat for every date value, and filter it by that value? — Paulos3000
– Paulos3000, Commented May 18, 2016 at 18:52
Yes.First ng-repeat by dates and the second one by fixtures (per date). — MaKCbIMKo
– MaKCbIMKo, Commented May 18, 2016 at 19:08
Could you give me a rough idea of the syntax for that? I've never done nested ng-repeats... — Paulos3000
– Paulos3000, Commented May 18, 2016 at 19:09

MaKCbIMKo · Accepted Answer · 2016-05-18 20:51:21Z

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.

edited May 18, 2016 at 20:51

answered May 18, 2016 at 19:16

MaKCbIMKo

2,8101 gold badge21 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Paulos3000 Over a year ago

That's exactly the solution I'm looking for, but I can't figure out how to write the filter! Would it have to be in a filter module?

Paulos3000 Over a year ago

Thanks! That filter is amazing, you saved my day!

haggisandchips · Accepted Answer · 2016-05-18 19:12:01Z

0

You could create a filter and pass getFixtures through it. The filter could iterate over the list adding a flag to the required items (by checking index===0 or current date !== previous date). I am assuming that the list is already sorted by date.

If you don't want to "pollute" the original then copy each element and add to a new array but this would obviously have a performance hit which may or may not be significant.

answered May 18, 2016 at 19:12

haggisandchips

5612 silver badges11 bronze badges

Collectives™ on Stack Overflow

Preventing duplicate values in an ng-repeat (AngularJS)

HTML

VIEW (desired outcome)

1st June

2nd June

4th June

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

HTML

VIEW (desired outcome)

1st June

2nd June

4th June

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related