Возврат повторяющихся объектов, только если они уникальны в ng-repeat Angular

Я использую Angular для перебора некоторых событий из файла JSON. Все хорошо, за исключением того, что я пытаюсь показать повторяющийся event.month только один раз в 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
span не может находиться непосредственно внутри ul   -  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

Используйте фильтр groupby, чтобы сгруппировать все, что вы хотите сгруппировать.

Фильтры 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, думаю, что-то подобное может сработать? - person A.B; 28.10.2014
comment
Не совсем получается. {{event.day}} возвращает день недели. {{event.month}} возвращает месяц и дату. У меня также есть {{event.uniquedate}}, который вернет «28 октября 2014 года». Поэтому имеет смысл сопоставить либо месяц, либо уникальную дату. Однако любой из них с вашим предложением все еще не работает. Я ценю помощь! - person Drewbietron; 28.10.2014
comment
используя диапазон и математику с индексом 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