kenpeter
kenpeter

Reputation: 8274

Angularjs 1: delete an item, but item still exist until refresh

Here is my simple angular 1 app.

Source code here.

Basically it is a copy of this.

I am able to do CRUD operations. The issue is that, when I delete a record. It redirects back to the home page. The record I deleted is still here. If I refresh the page, it is gone.

Is it a way to delete a record and then after redirect, I should see the latest list?

Update 1:

Unfortunately, it is still unresolved. Something strange that it seems the promise in resolve is cached. I added a few console.log inside the code. You can see the code flow. Open chrome developer tool to see it.

Upvotes: 0

Views: 463

Answers (2)

omer cohen
omer cohen

Reputation: 282

i review you code , the problem is here:

this.deleteContact = function(contactId) {
  var url = backend_server + "/contacts/" + contactId;
    // actually http delete
    return $http.delete(url)
      .then(function(response) {
        return response;
      }, function(response) {
        alert("Error deleting this contact.");
        console.log(response);
    });
}  

if you have service to manage your contact use there to call your server to delete the contact.

the reason you cannot delete without refresh is:

  • your delete from DB but not from angular array.
  • must review (update the scope (array))

your code is hard to read , i have suggestion for you, using:

  • broserfy , watchify
  • lodash
  • and backen use mvc

Upvotes: 1

GProst
GProst

Reputation: 10237

You delete it remotely but not locally. So you can see result only after refreshing (only after you requesting updated data from server). You need to update your local contacts after you succeed on server side.

$scope.deleteContact = function(contactId) {
  Contacts.deleteContact(contactId).then(function(data){

    ...

    //DELETE YOU LOCAL CONTACT HERE

    ...

    $location.path("/");
  });

}

I didn't look deeply into your code, so I can't say how exactly you should do it, but as I see you keep your local contacts in $scope.contacts in your ListController.

Upvotes: 0

Related Questions