Angular.js: Is it possible to re-render ng-repeats based on existing scope data?

angularjs scope refresh rerender
Jannis picture Jannis · Sep 26, 2012 · Viewed 16.2k times · Source

I have a bunch of connected ul lists in my view which are using a jQuery UI: Sortable directive to facilitate drag and drop and reordering of the list items.

Changes I make via jQuery UI's drag and drop I apply to the $scope using the $apply function, this part works…

The issue I am running into now however is that on drop into some of these lists I provide a custom form that the user needs to fill out.

The user has the option to:

  1. fill out the form and continue which then does the $apply call to persists the data into the $scope
  2. click a cancel button which instead of calling the $apply to store info, should revert the last drag/drop interaction effectively 're-rendering' all my lists to reflect the data that is still in the $scope at this stage (since the latest drag had not had any effect on it yet).

The effect of this "cancel" button is effectively reverting everything to the point before the user picked up the list item and dragged it into another list.

How can I force a 'refresh' or 're-render' of my ng-repeats so that they visually refresh and show the current $scope data again?

Answer

Andrew Joslin picture Andrew Joslin · Nov 5, 2012

When the user starts filling out the form, I would set

$scope.oldData = angular.copy($scope.data);

Then let the user edit $scope.data using the form as he likes.

Then if the user presses cancel, just set $scope.data = $scope.oldData.

Related questions

How does angular application handle refresh page and could we use $history on loading directives

So two questions. How does angular applications handle refresh page, b/c from what I heard, $rootScope destroy() on refresh and application gets re-run and re-config -ed, and I was wondering if there's an elegant way to preserve the $rootScope …

Read More
How to remove elements/nodes from angular.js array

I am trying to remove elements from the array $scope.items so that items are removed in the view ng-repeat="item in items" Just for demonstrative purposes here is some code: for(i=0;i<$scope.items.length;i++){ if($…

Read More
What's the correct way to communicate between controllers in AngularJS?

What's the correct way to communicate between controllers? I'm currently using a horrible fudge involving window: function StockSubgroupCtrl($scope, $http) { $scope.subgroups = []; $scope.handleSubgroupsLoaded = function(data, status) { $scope.subgroups = data; } $scope.fetch = function(prod_grp) { $http.get('/api/stock/…

Read More