NG-Repeat is not cleanly updated when region is updated
So, I have a list of workspaces:
<li class="workspace-object" ng-repeat="w in workspaces | filter:searchQuery" ng-click="selectWorkspace(w)">
<a href="" class="workspace-link">{{w.name | titleCase }}</a>
</li>
This list is updated in the database by some function and then I call the loadWorkspaces function below to repopulate the $ scope.workspaces object
$scope.loadWorkspaces = function() {
APIService.getWorkspaces().then(function(data){
$scope.workspaces = data;
});
}
When this happens, the $ scope.works objects immediately read the correct updated information on logout, however, the DUPLICATES ng-repeat before it is updated in the appropriate list. I have no idea why this is happening. Any ideas? In this example, I am updating the workspace header and this update triggers the loadworkspaces function.
source to share
Try it...
w in workspaces track by $index
When the contents of the collection change, ngRepeat makes the appropriate changes to the DOM:
- When an element is added, a new template instance is added to the DOM.
- When an element is removed, its template instance is removed from the DOM.
- When elements are reordered, their respective templates are reordered in the DOM.
By default, ngRepeat does not allow duplicate elements in arrays. This is because, when there are duplicates, it is not possible to maintain a one-to-one mapping between collection elements and DOM elements.
If you need to repeat repeating elements, you can change the default tracking behavior to your own using track by expression.
For example, you can track items by the index of each item in a collection using the special scope property $ index
source to share