防止 ng-repeat 中的重复值 (AngularJS)

Question

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

我猜我应该将 ng-if 应用于标记，并设置相应的函数，如果它在 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

任何 help/suggestions 将不胜感激。

Answer 1

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

如果您不想 "pollute" 原始的，那么复制每个元素并添加到一个新数组中，但这显然会对性能造成影响，这可能会或可能不会很重要。

Answer 2

您可以这样做：

<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

希望对您有所帮助。

防止 ng-repeat 中的重复值 (AngularJS)

Preventing duplicate values in an ng-repeat (AngularJS)

javascript

duplicates

angularjs

ng-repeat

angular-ng-if

HTML

VIEW（期望的结果）

6 月 1 日

6 月 2 日

6 月 4 日