I am encountering an issue with a list of cards retrieved from an API and displayed in a table using ng-repeat. The problem arises when I attempt to delete a card - sometimes it remains in the view, while other times it disappears as expected after confirmation. The API is responding correctly by returning the correct number of records.
Below is the controller code:
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 here is the model code:
angular.module('frontend').factory('Card', function($resource, API_URL) {
return $resource(API_URL + "/cards/:id.json", {
id: '@id_string'
}, {
update: {
method: 'PUT'
}
});
});
The following snippet shows the part of the view that depends 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>
To resolve this inconsistency, I considered removing the specific record from the table using splice but refrained due to the complexity of updating table striping. Instead, my goal is to refresh the entire table each time a deletion occurs. Despite logging from the getCards function confirming its execution upon page load and after deletion, the table rows are not consistently refreshing once $scope.cards is updated. This behavior has left me puzzled as to why it's happening sporadically.