AngularJS: пользовательские итерации / преобразования и группировка данных… когда простой ng-repeat просто не обрежет

Еще эта проблемаAngular.js более сложные условные циклы но я чувствовал, что ответ на заданный вопрос был правильным, поэтому я принял его.

Итак, позвольте мне уточнить больше, чем я сделал в первоначальном вопросе.

Я пытаюсь получить это

<h3>11.4.2013</h3>
<ul>
 <li>oofrab | 4 | 11.4.2013 14:55 <button>remove</button></li>
 <li>raboof | 3 | 11.4.2013 13:35 <button>remove</button></li>
</ul>

<h3>10.4.2013</h3>
<ul>
 <li>barfoo | 2 | 10.4.2013 18:10 <button>remove</button></li>
 <li>foobar | 1 | 10.4.2013 12:55 <button>remove</button></li> 
</ul>

из этой структуры данных

[
    {
        "id": 4,
        "name": "oofrab",
        "date": "2013-11-04 14:55:00"
    },
    {
        "id": 3,
        "name": "raboof",
        "date": "2013-11-04 13:55:00"
    },
    {
        "id": 2,
        "name": "barfoo",
        "date": "2013-10-04 18:10:00"
    },
    {
        "id": 1,
        "name": "foobar",
        "date": "2013-10-04 12:55:00"
    }
]

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

Это то, что я закончил с использованием ответа, который я получил в первом вопросеhttp://plnkr.co/edit/Zl5EcsiXXV92d3VH9Hqk?p=preview

Обратите внимание, что реально может быть до 400 записей. И мне нужно иметь возможность добавлять / удалять / редактировать записи на лету

Вот что делает пример с plunker:

перебирая исходные данные, создавая новую структуру данных, похожую на эту

{
  "2013-10-05": [
    {
      "id": 4,
      "name": "oofrab",
      "date": "2013-10-05 14:55:00",
      "_orig_index": 0
    },
    {
      "id": 3,
      "name": "raboof",
      "date": "2013-10-05 13:55:00",
      "_orig_index": 1
    }
  ],
  "2013-10-04": [
    {
      "id": 2,
      "name": "barfoo",
      "date": "2013-10-04 18:10:00",
      "_orig_index": 2
    },
    {
      "id": 1,
      "name": "foobar",
      "date": "2013-10-04 12:55:00",
      "_orig_index": 3
    }
  ]
}

позволяя мне тогда получить желаемый результат, делая это

<div ng-repeat="(date,subItems) in itemDateMap">
<h3>{{date}}</h3>
<ul>
  <li ng-repeat="item in subItems">
    {{item.name}} | {{item.id}} | {{item.date}}
    <button type="button" ng-click="removeItem(item._orig_index)">x</button>
  </li>
</ul>  
</div>

Отлично. Но это идет с огромным количеством проблем. Каждый раз, когда добавляется новый элемент, я должен восстановитьitemDateMapкаждый раз, когда элемент удаляется, я должен восстановитьitemDateMap, каждый раз, когда дата меняется, я должен восстановитьitemDateMap, Когда я хочу удалить элемент, я должен сначала получить индекс его исходной ссылки. И каждый разitemDateMap перестраивается, все это перерисовывается. И это не может быть отсортировано, так как это объект, а не массив.

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

Это не может быть правдой, все это делает очень, очень простую вещь ...

Что я должен делать?

Ответы на вопрос(1)

Ваш ответ на вопрос