サーバーから取得した JSON 配列のデータを含むテーブル行で ng-repeat を使用しています。私の目標は、アイテムがサーバー上で追加、削除、または変更されるたびに、変更されていないアイテムに影響を与えることなく、リストを自動的に更新することです。最終的な実装では、これらのテーブル行には、更新をサーバーに送り返すための双方向にバインドさ<input>れた要素も含まれます。<select>要素で使用可能なオプションの一部は、<select>変更される可能性のある別のリストからの ng-repeat ディレクティブを使用して生成されます。
これまでのところ、新しいアレイがサーバーから送信されるたびに (現在は 2 秒ごとにポーリングされます)、ng-repeat リスト全体が削除され、再生成されます。これは、テキストの選択を妨げ、入力フィールドがユーザーによって現在編集されていても破壊され、おそらく必要以上に遅く実行されるため、問題があります。
jQuery と DOM 操作を使用して、自分のやりたいことを実行する他の Web アプリを作成しましたが、コードは非常に複雑になり、開発には時間がかかります。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);
}
]
);