Delete a id using Angular - angularjs

Question

Users can search for a movie title in my inputfield and it will show them a list of movies. They can then hover over a title and a Add Movie button pops up. They can click it so it gets added to their frontpage. But now I'm trying to figure out how they can remove that movie from the database. But I can't find a clear example on how to do this.
This is how I show the movies,
%div{"ng-repeat" => "movie in movies"}
{{ movie.id }}
{{ movie.title }}
%a{"ng-click" => "deleteMovie($index)"}delete
I think I have to create a delete action in my controller called deleteMovie which works with a service to remove the id from the database.
This is how I see the service,
.factory('removeMovie', ['$http', function($http) {
return {
deleteMovie: function() {
return $http.delete('/movies.json/$id');
}
};
}])
The deleteMovie would be called in the controller. But I have the feeling I'm approaching this the wrong way.

Answer 1

Please follow the below code.
HTML View
%div{"ng-repeat" => "movie in movies"}
{{ movie.id }}
{{ movie.title }}
%a{"ng-click" => "deleteMovie(movie)"}delete
Controller
.controller('MainController', ['$scope','removeMovie',
function($scope, removeMovie) {
$scope.deleteMovie = function(movie){
removeMovie.deleteMovie(movie.id).then(function(sucessResponse){
//success callback
},function(errorResponse){
//Error callback
})
}
}
]);
Factory
.factory('removeMovie', ['$http', function($http) {
return {
deleteMovie: function(movieId) {
var _movieId = parseInt(movieId);
return $http.delete('/movies.json/'+_movieId);
}
};
}]);
if you are using the static json, then you do not need to make any rest request. You can simple splice the movie from movies array.if you are deleting movie from database then you need to make a rest request like this $http.delete('/movies/'+_movieId);

Answer 2

if the service only calls one http call, you might ass well write that already i your controller:
view:
%div{"ng-repeat" => "movie in movies"}
{{ movie.id }}
{{ movie.title }}
%a{"ng-click" => "deleteMovie(movie.id)"}delete
and inthe controller
.controller('myCtrl', ['$scope', '$http', function($scope, $http) {
$scope.deleteMovie = function(id) {
$http.delete('/movies.json/' + id);
}
}])

Answer 3

Pass in the whole movie object so that you can use it for the post but also to simply index it in the array for removal locally as well.
Adjust factory for id
.factory('removeMovie', ['$http', function($http) {
return {
deleteMovie: function(id) {
return $http.delete('/movies/' +id);
}
};
}]);
HTML
"ng-click" => "deleteMovie(movie)"}delete
Now make request from controller and remove from local array on completeion
$scope.deleteMovie = function(movie) {
removeMovie.deleteMovie(movie.id).then(function(resp){
// validate your response here before next step
// get index of movie in array
var idx = $scope.movies.indexOf(movie);
//remove from array
$scope.movies.splice( idx, 1);
});
}
Note that it seems strange to have a factory just for removeMovie.
Normally you would have all your CRUD operations in the same factory