Just starting out with angular and trying to work with the $resource library for API services. I'm having trouble figuring out how to delete a record obtained through the query() method. Specifically, we have an endpoint for user notifications. The goal is to fetch all user notifications on page load, iterate over them using ng-repeat, and display them in the navigation bar. When a user clicks on the remove icon, the corresponding notification should be deleted. Here's a simplified version of my current code:
Js:
angular.module('myapp', ['ngResource']).factory('Notifications',function($resource){
return $resource('/apiv2/user/notifications/:id', {id:'@id'});
}).controller('NavigationController',['$scope','Notifications',function($scope, Notifications){
$scope.notifications = Notifications.query();
$scope.deleteNotification = function(notification){
notification.$delete();
};
}]);
HTML:
<ul>
<li ng-repeat="notification in notifications">
<i class="icon-remove" ng-click="deleteNotification(notification)"></i>
</li>
</ul>
While this code works correctly in deleting the notification from the backend when the remove icon is clicked, the issue arises when examining the $scope.notifications object afterwards. The deleted notification still appears with broken data:
{$promise:undefined, $resolved:true}
The desired outcome is to completely remove the deleted record from the object returned by the .query() method without needing to run the query again.
Any assistance would be greatly appreciated! Please excuse any vague descriptions or errors in the code, as I wrote this from memory on my phone while out to dinner.