One of my services provides a list of available videos that can be displayed using an ng-repeat in a controller. The service function retrieves the list of videos and populates a variable within the $rootScope.
videosApp.factory('VideosService', function ($http, $rootScope) {
$rootScope.videos = {
list: [],
};
$http.get('/panel/videos')
.then(
function (response) {
$rootScope.videos.list = response.data;
},
function () {
alert('what is the velocity of a swallow?');
}
);
return $rootScope;
});
videosApp.controller('VideosController', [
'$scope', '$http', '$filter', '$window',
function ($scope, $http, VideosService) {
$scope.deleteVideo = function(id) {
if (confirm('Are you sure you want to delete this video?')) {
$http.delete('/panel/videos/'+id)
.then(
function (response) {
growl(response.data.message, 'success');
},
function (response) {
growl(response.data.message, 'danger');
}
);
}
}
}
]);
The HTML code displays the list of videos and includes a button for deleting each video:
<div id="videos-listing" class="row" ng-controller="VideosController">
<ul>
<li ng-repeat="video in videos.list">
{{video.name}}
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation">
<a role="menuitem" href="#delete" ng-click="deleteVideo(video.id)">Delete</a>
</li>
</ul>
</li>
</ul>
</div>
The challenge I'm facing is how to refresh the video listing after successfully deleting an item. One approach I considered was to call the get '/panel/videos' endpoint again after deletion, but then how do I update the ng-repeat? Are there better alternatives?