仅当在 Angular 的 ng-repeat 中唯一时才返回重复对象

Question

我正在使用Angular迭代JSON文件中的一些事件。一切都很好，除了我试图展示重复的事件。月份只有一次重复。event.month返回月份和日期（即10月28日），event.day返回星期几（即星期二）

如果10月28日以下有20场活动，我只希望第一场10月28号出现在视野中。我尝试了一些不同的自定义过滤器，但似乎都做不好。

我试着从https://github.com/a8m/angular-filter但是运气不好。我想要这个功能，但我不希望它忽略整个对象，我只希望它在日期已经存在的情况下省略跨度。

如有任何帮助，我们将不胜感激！

CodePen-http://codepen.io/drewbietron/pen/qLBit

这是我正在处理的一个伪版本。

<ul ng-repeat="event in events">
    <div> <!-- ONLY SHOW FIRST {{event.month}} - OMIT IF {{event.month}} EXISTS -->
        {{event.day}}
        {{event.month}}
    </div>
    <li>
        <span>{{event.time}}</span>
        <h2>{{event.instructor}}</h2>
        <p>{{event.info}}</p>
    </li>
</ul>

Answer 1

假设您想省略Month 的显示

创建自定义过滤器如下：

app.filter('uniqueMonth', function() {
   var prevVal = null;
   return function(input) {
     if (prevVal !== input) {
       prevVal = input;
       return prevVal;
     }
   };
});

更新HTML:

{{event.month|uniqueMonth}}

链接以更新代码笔http://codepen.io/anon/pen/texiE

---

如果你想省略整个日期显示这里是另一个代码笔链接http://codepen.io/pailas/pen/dDIxy

创建自定义过滤器如下：

app.filter('uniqueDate', function() {
   var prevVal = null;
   return function(input) {
    if (prevVal !== input.month) {
      prevVal = input.month;
      return input.day + " " + input.month;
    }
   };
});

更新HTML:

<ul ng-repeat="event in events | orderBy: 'datetime'">
 <li>  
  <div class="date">
    {{event|uniqueDate}}
  </div>
  <span class="time">{{event.time}}</span>
 </li>
</ul>

Answer 2

使用groupby过滤器按您想要分组的内容进行分组。

角度过滤器-按分组

Answer 3

在此处发布答案时使用类似的唯一过滤器

 ng-repeat="event in events unique:'month'"

如果你不希望整个对象被省略

试试

  <span ng-show="events[$index-1].month!=event.month">{{event.month}} </span>

或者说它不是的第一个元素

 <span ng-show="(!$first)?(events[$index-1].month!=event.month):true">{{event.month}} </span>