Връщане на повтарящи се обекти само ако са уникални в ng-repeat на Angular

Използвам Angular за итерация през някои събития от JSON файл. Всичко е наред, освен че се опитвам да покажа повторено събитие.месец само веднъж в ng-repeat. Event.month връща месеца и деня (т.е. 28 октомври), а event.day връща деня от седмицата (т.е. вторник)

Ако има 20 събития под 28 октомври, искам само първият 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>

javascript angularjs angular-filters ng-repeat
person Drewbietron    schedule 28.10.2014    source източник
comment
педя не може да бъде директно вътре в ул   -  person PSL    schedule 28.10.2014
comment
Бихте ли могли също така да прикачите уникалното „разбиране“ на ъгловия филтър? Може би има нещо, което сте пропуснали?   -  person jsfrocha    schedule 28.10.2014
comment
Можете ли да създадете цигулка за това?   -  person Srinivas Paila    schedule 28.10.2014
comment
@SrinivasPaila - редактирах публикацията си и добавих връзката CodePen   -  person Drewbietron    schedule 28.10.2014

Отговори (3)


arrow_upward
2
arrow_downward

Ако приемем, че искате да пропуснете показването на месеца

Създайте персонализиран филтър, както е показано по-долу:

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>
person Srinivas Paila    schedule 28.10.2014
comment
Това работи доста добре. Има ли начин да наблюдавам филтъра, така че когато всъщност филтрирам класове, той да не го изхвърля? Точно сега, ако стартирам филтри в списък със списък с класове - датите се изхвърлят. - person Drewbietron; 29.10.2014
comment
Не разбрах въпроса ви, когато казахте, че датите се изхвърлят? Кой филтър имахте предвид първия или по-късния? - person Srinivas Paila; 29.10.2014
comment
За събитията - имам и учителката. Ако филтрирам резултатите по учител - първата дата от неговия тип е обвързана с учителя, а не с мястото, което заема. Ето CodePen с текущите ми филтри - Ако щракнете върху един от типовете класове, който е първият от неговия тип дата - останалите типове класове с тази дата не наследяват тази дата. codepen.io/drewbietron/pen/dKjhe - person Drewbietron; 29.10.2014
comment
Има ли късмет? Работя върху това два дни без прекъсване! Опитах се да върна dat като false, ако не е първият от този тип, но не работи. Също така как да актуализирате обхвата след филтър? - person Drewbietron; 30.10.2014

arrow_upward
1
arrow_downward

Използвайте филтър за групиране, за да групирате по каквото искате да групирате.

Angular филтри - groupby

person Chi Row    schedule 28.10.2014

arrow_upward
0
arrow_downward

публикувайки отговора тук, използвайте уникалния филтър като този

 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>
person A.B    schedule 28.10.2014
comment
съжалявам, че отговорът не беше публикуван там, нека да публикувам отново - person A.B; 28.10.2014
comment
Уникалният филтър работи, но пропуска целия обект от списъка, а не само датата. - person Drewbietron; 28.10.2014
comment
@Drewbietron, нещо подобно може ли да работи в thnik? - person A.B; 28.10.2014
comment
Не успявам съвсем. {{event.day}} връща деня от седмицата. {{event.month}} връща месеца и датата. Също така имам {{event.uniquedate}}, който ще върне „28 октомври 2014 г.“ – така че има смисъл да съответствате или на месеца, или на уникалната дата. Нито едно от тези с твоето предложение обаче все още не работи. Оценявам помощта! - person Drewbietron; 28.10.2014
comment
използвайки span и mathing с prevois индекс, какво произвежда това? - person A.B; 28.10.2014
comment
и какво ще кажете за това? ‹span ng-show=events.indexOf(event.month)==-1›{{event.month}} ‹/span› - person A.B; 28.10.2014
comment
Има няколко от всяка дата. - person Drewbietron; 28.10.2014
comment
опитайте този интервал, който е в коментар? - person A.B; 28.10.2014
comment
Добавих връзка към CodePen, ако искате да опитате. - person Drewbietron; 28.10.2014