CODEWITHSUNDEEP
javascriptangularjs
Shaun
Shaun

Reputation: 2052

AngularJS scope is only refreshed sometimes

I have a list of cards I'm pulling from an API and displaying in a table using ng-repeat. When I click to delete one, a confirmation box pops up and if true, the record is deleted and the whole table is refreshed. The API is responding as I expect it to, with the correct amount of records. But sometimes the record remains in the view. Sometimes it doesn't.

Here's the controller:

angular.module("frontend").controller("AdminCardsCtrl", function($scope, auth, Card) {
  var getCards;
  auth.adminOnly();
  getCards = function() {
    Card.query({}, function(cards) {
      $scope.cards = cards;
    });
  };
  getCards();
  $scope.destroy = function(card) {
    var confirmation;
    confirmation = confirm('Are you sure?');
    if (confirmation) {
      Card.get({
        id: card.id_string
      }, function(card) {
        card.$delete();
        getCards();
      });
    }
  };
})

And the model:

angular.module('frontend').factory('Card', function($resource, API_URL) {
  return $resource(API_URL + "/cards/:id.json", {
    id: '@id_string'
  }, {
    update: {
      method: 'PUT'
    }
  });
});

And here's the part of the view dependent on $scope.cards.

  <tr ng-repeat="card in cards">
    <td><a ng-href="/admin/cards/{{card.id_string}}">{{ card.name }}</a></td>
    <td>{{ card.category }}</td>
    <td><a ng-href="/admin/cards/{{card.id_string}}/edit">Edit</a> / <a ng-click="destroy(card)">Delete</a></td>
  </tr>

I could try splicing the single record out of the table, but that would require updating the table striping as well, which is why I'd like to just refresh the whole thing. If I do console.log from the getCards function, it is running when I load the page and after I confirm deletion. Shouldn't resetting $scope.cards each time something is deleted cause all the table rows to refresh? Why would it be happening inconsistently?

Upvotes: 0

Views: 79

Answers (2)

Alex Paramonov
Alex Paramonov

Reputation: 2720

You should get new cards only after $delete request completes:

card.$delete(getCards);

Upvotes: 1

arsinawaz
arsinawaz

Reputation: 480

Calling $delete on a resource only sends the HTTP request. If you want to remove the item from view, you have to do it yourself.

you might try something like the following:

card.$delete(..., function() {
    $scope.card.splice(index, 1);
  });

Upvotes: 1

Related Questions