I'm facing a challenge with Angular where I need to render and refresh a complex list of objects every few seconds. The issue I have encountered is that during the refresh, even if a specific HTML subcomponent hasn't changed, the entire HTML is updated causing selected text (such as for copying) to be deselected.
I understand that altering HTML with an active selection poses an issue, but I'm curious to know if Angular offers a solution that I may not be aware of. Ideally, I would like only the HTML that has actually changed to be updated. While I could achieve this manually using jQuery, the manual approach is cumbersome in all other aspects.
JS:
angular.module('items', [])
.factory('itemList', ['$http', function($http) {
var items = [];
var refresh = function() {
// HTTP call to fetch new list of items
items.length = 0;
for (var i = 0; i < 10; i++) {
items.push("item " + Math.random(1, 10))
}
}
refresh();
return {
items: items,
refresh: refresh
};
}]);
var app = angular.module('app', [
'items'
]);
app.controller('ItemListController',
['$scope', 'itemList', '$interval',
function($scope, itemList, $interval) {
this.items = itemList.items;
$interval(itemList.refresh, 2000)
}
]);
HTML:
<body ng-app="app">
<div ng-controller="ItemListController as controller">
<h3>Items</h3>
<div ng-model="active">
<div ng-repeat="item in controller.items">
<div class="header">Header</div>
<div>{{item}}</div>
<hr/>
</div>
</div>
</div>
</body>