Question

我正在使用Angular来迭代来自JSON文件的一些事件。一切都很好，除了我试图在ng-repeat中只显示一次重复的事件。 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}}

更新codepen的链接 http://codepen.io/anon/pen/texiE

如果要省略整个日期显示这是另一个指向codepen的链接 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过滤器按照您想要分组的内容进行分组。

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

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

3 个答案: