Javascript 仅当在角度'中唯一时返回重复对象；s ng重复

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

如果10月28日下有20个事件，我只希望第一个10月28日出现在视图中。我尝试了一些不同的自定义过滤器，但似乎无法正确使用

我试着从中分离出独特的过滤器，但没有成功。我想要这个功能，但我不希望它对整个对象进行ommit，我只希望它忽略span，如果该日期已经存在

任何帮助都将不胜感激

代码笔-

这是我正在处理的问题的一个简化版本

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

{{event.day}
{{event.month}

{{event.time}
{{事件.讲师}
{{event.info}

在此处发布答案时，请使用以下唯一过滤器

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

如果你不想省略整个对象

试试像这样的东西

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

{{event.month}

或者说它不是第一个元素

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

{{event.month}

使用groupby筛选器按您要分组的任何内容分组

---

假设您想省略月份的显示

创建自定义筛选器，如下所示：

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

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

更新HTML:

{{event.month|uniqueMonth}}

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

链接到更新代码笔

---

如果您想省略整个日期显示，这里有另一个指向codepen的链接

创建自定义筛选器，如下所示：

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

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

更新HTML:

{{event.month|uniqueMonth}}

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

{{事件|唯一日期}
{{event.time}

span不能直接安装在ULD内部。您是否也可以将角度过滤器的“拾取分离”连接到unique上？也许你遗漏了什么？你能为这个制作一把小提琴吗？@SrinivasPaila-我已经编辑了我的帖子并添加了代码笔链接对不起，我的答案没有发布在那里，让我再发布一次独特的过滤器作品，但它从列表中省略了整个对象，而不仅仅是日期。@Drewbietron，像这样的东西行得通吗？我不太明白。{event.day}}返回一周中的某一天。{{event.month}}返回月份和日期。我还有一个{event.uniquedate}返回'2014年10月28日'，因此匹配月份或uniquedate是有意义的。不过，这两个建议中的任何一个都不起作用。我感谢你的帮助！使用span和prevois索引的mathing，这会产生什么结果？这非常有效。有没有一种方法可以监视过滤器，这样当我实际过滤类时，它就不会把它扔掉？现在，如果我在类列表上运行过滤器，日期会被推迟。当你说日期会被推迟时，我没有听到你的问题？你指的是第一个还是之后的过滤器？对于事件，我还有老师。如果我按教师筛选结果，则其类型的第一个日期绑定到教师，而不是它占用的空间。这是一个带有我当前过滤器的代码笔-如果你点击其中一个类类型，它是它的日期类型中的第一个-剩余的具有该日期的类类型不会继承该日期。运气好吗？我已经连续两天在做这个了！我尝试过将dat返回为false，如果它不是其类型的第一个，但不起作用。还有，如何在筛选后更新作用域？