Группировка ng-repeat и изменение внешней директивы DOM

Я не совсем уверен, как описать проблему, с которой я столкнулся, или даже если это проблема. Думаю, у меня проблемы с пониманием того, как работают директивы Angular. Приветствуются любые советы и/или мнения о передовом опыте.

У меня есть простой массив объектов в $scope моего контроллера:

$scope.birthdays = [
      { name: "bob", dob:moment("09/20/1953"), cake: "vanilla"},
      { name: "michael", dob:moment("09/20/1953"), cake: "chocolate" },
      { name: "dave", dob:moment("09/20/1953"), cake: "chocolate" },
      { name: "chief", dob:moment("04/24/1977"), cake: "chocolate" },
      { name: "jerry", dob:moment("04/24/1977"), cake: "red velvet" },
      { name: "jerkface", dob:moment("04/24/1977"), cake: "i hate cake" },
      { name: "doug", dob:moment("05/10/1994"), cake: "marble" },
      { name: "jeff", dob:moment("05/10/1994"), cake: "vanilla" }
];

Скажем, я хотел бы создать структуру DOM из этой модели данных:

<h1>Birthday: 09/20/1953</h1>
<div class="birthday">
   <h2>Name: bob</h2>
   <h3>Cake: vanilla</h3>
</div>
<div class="birthday">
   <h2>Name: michael</h2>
   <h3>Cake: chocolate</h3>
</div>
<div class="birthday">
   <h2>Name: dave</h2>
   <h3>Cake: chocolate</h3>
</div>
<h1>Birthday: 04/24/1977</h1>
<div class="birthday">
   <h2>Name: chief</h2>
   <h3>Cake: chocolate</h3>
</div>
....

Я могу добиться чего-то близкого к этому в этом плункере.

Однако там я получаю немного другую структуру DOM, которая мне не нужна.

<div ng-repeat="birthday in birthdays" birthday-boy="">
    <h3 ng-show="!birthdays[$index-1].dob.isSame(birthday.dob)" class="ng-binding" style="">
        September 20th, 1953
    </h3>
    <div class="ng-binding">
        Name: bob
    </div>
    <div class="ng-binding">
        Cake: vanilla
    </div>
</div>
<div ng-repeat="birthday in birthdays" birthday-boy="">
    <h3 ng-show="!birthdays[$index-1].dob.isSame(birthday.dob)" class="ng-binding" style="display: none;">
        September 20th, 1953
    </h3>
    <div class="ng-binding">
        Name: michael
    </div>
    <div class="ng-binding">
        Cake: chocolate
    </div>
</div>
<div ng-repeat="birthday in birthdays" birthday-boy="">
    <h3 ng-show="!birthdays[$index-1].dob.isSame(birthday.dob)" class="ng-binding" style="">
        April 24th, 1977
    </h3>
    <div class="ng-binding">
        Name: chief
    </div>
    <div class="ng-binding">
        Cake: chocolate
    </div>
</div>

Итак, мои вопросы:

  1. Правильно ли я думаю об этой проблеме? Должен ли я изменять свою структуру данных, чтобы группировать ее по датам, а затем просто повторять ng-repeat для каждой отдельной даты?
  2. Если есть способ сделать это с моей существующей структурой данных, нужно ли мне изменять DOM за пределами директивы Birthday-boy / ng-repeat?
  3. Есть ли способ обернуть директиву ng-repeat во что-то пользовательское - я начал изучать функцию компиляции, но просто не уверен...

Спасибо!


javascript angularjs angularjs-directive angularjs-ng-repeat ng-repeat
person Chief    schedule 18.03.2013    source источник
comment
Соблюдайте принцип KISS и сгруппируйте его в контроллере (используя выражение $watch на birthdays ).   -  person Stewie    schedule 18.03.2013
comment
Спасибо @stewie. Имеет смысл, по какой-то причине я подумал, что было бы лучше реализовать директиву, чтобы позаботиться об этом. В конце концов, это, вероятно, более быстрое/менее дорогое решение.   -  person Chief    schedule 18.03.2013

Ответы (1)


arrow_upward
2
arrow_downward

Я бы сгруппировал по датам в вашем контроллере, а затем ng-repeat по этому новому свойству области. Вот скрипка, которую я написал для аналогичного вопроса "группировать по". Вы должны быть в состоянии адаптировать его для своего кода. Я использовал orderByFilter

$scope.sortedFriends = orderByFilter($scope.friends, '+age');

но вам, вероятно, придется использовать dateFilter или любой другой код JavaScript, который у вас может быть, чтобы сортировать по материалу dob.

person Mark Rajcok    schedule 18.03.2013
comment
Спасибо @Mark, я думаю, это имеет смысл, как Стьюи в комментарии выше, чтобы все было просто, глупо. Я полагаю, что будет дешевле изменить структуру данных, чем иметь группу логики внутри моей директивы и изменять DOM и т. д. - person Chief; 18.03.2013
comment
Вы получите еще худшую структуру DOM, если будете использовать что-то похожее на скрипку. И изменение структуры данных при каждом добавлении/удалении, когда есть 400 или около того элементов, может быть чертовски медленным. У меня та же проблема здесь stackoverflow.com/questions/15953236/ Я могу' Не поверите, это такая заноза в заднице, делать что-то настолько простое.. - person fxck; 12.04.2013