防止ng-repeat中重复的值（AngularJS）

Question

我通过ng-repeat列出了一大堆运动装置，但我只想在第一次出现时显示date值。另外，我想在div中包含此日期值，并带有<hr>标记。

我猜我应该将ng-if应用于标记，并将相应的函数设置为true，如果它是getFixtures数组中第一次出现的值。我不太确定如何做到这一点，或者确实可能。

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（期望的结果）

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

希望它会有所帮助。

Answer 2

你可以创建一个过滤器并通过它传递getFixtures。过滤器可以迭代列表，为所需项添加一个标志（通过检查索引=== 0或当前日期！==上一个日期）。我假设列表已按日期排序。

如果你不想“污染”原件，那么复制每个元素并添加到一个新阵列，但这显然会有性能损失，这可能是也可能不重要。