javascript - 防止 ng-repeat 中出现重复值 (AngularJS)

Question

我通过 ng-repeat 列出了一系列体育赛事，但我只想显示 date第一次出现时的值。此外，我想将此日期值包含在 div 中，并带有 <hr>标签。

我想我应该申请 ng-if到标签，并设置相应的函数，如果该值在 getFixtures 中第一次出现，则计算结果为 true大批。我不太确定如何做到这一点，或者是否确实可能。

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>

<小时/>

查看(期望的结果)

6 月 1 日

<小时/>夹具A
夹具B
夹具C

6 月 2 日

<小时/>夹具D
夹具E

6 月 4 日

<小时/>夹具F
夹具G

<小时/>

任何帮助/建议将不胜感激。

Answer 1

你可以这样做:

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

其中groupByDate是自定义过滤器(作为选项)，用于按日期对灯具进行分组。

编辑:

您可以创建自己的过滤器，也可以尝试使用 angular-filter module 中已有的第三方过滤器.

在那里您可以找到groupBy filter并像这样使用它:

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

<小时/>

希望能有所帮助。