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, а не перерисовывает все и прочее, но, конечно, это не работает, когда я перестраиваю всю структуру.
Это не может быть правдой, все это делает очень, очень простую вещь ...
Что я должен делать?