Я использую ng-repeat в строке таблицы с данными из массива JSON, полученным с сервера. Моя цель - автоматически обновлять список всякий раз, когда элемент добавляется, удаляется или изменяется на сервере, не затрагивая неизмененные элементы. В финальной реализации эти строки таблицы также содержат привязанные к двунаправленным элементам <input> и <select> для отправки обновлений обратно на сервер. Некоторые из доступных опций в элементах <select> также будут сгенерированы с использованием директив ng-repeat из другого списка, который также может измениться.
До сих пор каждый раз, когда новый массив поступает с сервера (в настоящее время опрошено каждые две секунды), весь список ng-repeat удаляется и регенерируется. Это проблематично, поскольку оно мешает выбору текста, уничтожает поля ввода, даже если они в настоящее время редактируются пользователем, и, вероятно, работает намного медленнее, чем необходимо.
Я написал другие веб-приложения, которые делают то, что я хочу, используя jQuery и DOM-манипуляции, но код заканчивается действительно волосатым, и разработка занимает много времени. Я надеюсь использовать AngularJS и привязку данных, чтобы выполнить это во фракции кода и времени.
Итак, вот вопрос: можно ли обновить массив поддержки таким образом, но изменить только элементы DOM, соответствующие фактически изменяемым элементам/свойствам?
Здесь минимальный тестовый пример, который имитирует периодический опрос с использованием жестко закодированного массива в таймере (см. его в режиме http://jsfiddle.net/DWrmP/). Обратите внимание, что выбор текста очищается каждые 500 мс из-за стирания и воссоздания элементов.
HTML
<body ng-app="myApp">
<table ng-controller="MyController">
<tr ng-repeat="item in items | orderBy:'id'">
<td>{{item.id}}</td>
<td>{{item.data}}</td>
</tr>
</table>
</body>
JavaScript
angular.module('myApp', []).controller(
'MyController', [
'$scope', '$timeout',
function($scope, $timeout) {
$scope.items = [
{ id: 0, data: 'Zero' }
];
function setData() {
$scope.items = [
{ id: 1, data: 'One' },
{ id: 2, data: 'Two' },
{ id: 5, data: 'Five' },
{ id: 4, data: 'Four' },
{ id: 3, data: 'Three' }
];
$timeout(setData, 500);
}
$timeout(setData, 500);
}
]
);
