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

【问题标题】：Preventing duplicate values in an ng-repeat (AngularJS)防止 ng-repeat (AngularJS) 中的重复值
【发布时间】：2016-05-18 18:45:05
【问题描述】：

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

我猜我应该将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>

查看（期望的结果）

6 月 1 日

夹具A
夹具B
夹具 C

6 月 2 日

夹具 D
夹具 E

6 月 4 日

夹具 F
夹具 G

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

【问题讨论】：

为什么不按日期对项目进行分组？
您的意思是为每个日期值编写一个单独的 ng-repeat，并按该值过滤吗？
是的。第一个 ng-repeat 按日期排列，第二个按固定装置（按日期）排列。
你能给我一个大概的语法吗？我从来没有做过嵌套的 ng-repeats...
我给出了答案。希望它会有所帮助。

标签： javascript angularjs duplicates ng-repeat angular-ng-if

【解决方案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 并像这样使用它：

$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

希望它会有所帮助。

【讨论】：

这正是我正在寻找的解决方案，但我不知道如何编写过滤器！它必须在过滤器模块中吗？
谢谢！那个过滤器太棒了，你拯救了我的一天！

【解决方案2】：

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

如果您不想“污染”原始元素，则复制每个元素并添加到新数组中，但这显然会对性能造成影响，可能会也可能不会。

【讨论】：