CODEWITHSUNDEEP
javascriptangularjsuser-experience
yup
yup

Reputation: 329

Implementing Amazon Wishlist Like Undo in AngularJS

I'm thinking of implementing an "Amazon Wishlist-ish" undo functionality to my app.

I mean... Before

then click 'Delete Item'

After

by clicking 'Undo', the deletion appears to be canceled

Before

My list controller is currently looking like this,

function ListsController($scope, List) {↲                                                                                     
  List.get({}, function(lists) {
  $scope.lists = lists.objects;
  $scope.delete_list = function(index) {
    var isConfirmed = confirm('Are you sure you want to delete it?');
    if (isConfirmed) {      
      var targetlist = $scope.lists[index];
      List.delete({ listId: targetlist.id },
      function(list) {
        $scope.lists.splice(index, 1);
      }
      )
    }
  } 
 });
};

But I wanna enable undo feature as I said.

What is the best way to do that in angular js?

Upvotes: 1

Views: 480

Answers (1)

Joe
Joe

Reputation: 2596

I can't give an exact example without seeing what the List service does, but I think your best bet is to keep track of removed items in another scope variable and if the undo is clicked you just add it back to lists.

Maybe something like:

$scope.deleted_lists = [];
$scope.delete_list = function(index) {
  var isConfirmed = confirm('Are you sure you want to delete it?');
  if (isConfirmed) {      
    var targetlist = $scope.lists[index];
    List.delete({ listId: targetlist.id }, function(list) {
      $scope.deleted_lists.concat($scope.lists.splice(index, 1));
    });
  }
};

Then you can use an ng-repeat (if you want multiple undos) to display the deleted items and a click on the undo button could simply add the item back to the list via .push().

Upvotes: 1

Related Questions