AngularJS Factory Service
Question
I am trying to use a Factory Service function in my app to add a movie to my list. I have been able to remove a movie from the list, but I am having trouble figuring out why I can't add a movie to the current list.
var app = angular.module('application', []); app.factory("MoviesService",[function(){ var movies = [ {title:"Avengers: Age of Ultron",rating:"PG-13",year:"2015"}, {title:"Ant-Man",rating:"PG-13",year:"2015"}, {title:"The Martian",rating:"PG-13",year:"2015"}, {title:"San Andreas",rating:"PG-13",year:"2015"}, {title:"Jurassic Park",rating:"PG-13",year:"2015"}, {title:"Dope",rating:"PG-13",year:"2015"} ]; var factory = {}; factory.getMovies = function(){ return movies; }; factory.addMovie = function(){ var newMovie = { title: movie.title, rating: movie.rating, year: movie.year } movies.push(newMovie); }; factory.removeMovie = function(movie){ var index = movies.indexOf(movie); movies.splice(index,1); }; return factory; }]); app.controller('CustomerController',['$scope','MoviesService',function($scope,MoviesService){ $scope.movies = MoviesService.getMovies(); $scope.removeMovie = function(movie){ MoviesService.removeMovie(); }; $scope.addMovie = function(){ MoviesService.addMovie(); }
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <body ng-app = "application"> <div class = "row"> <div class = "col-md-12" ng-controller = "CustomerController"> <table class="table"> <caption>Optional table caption.</caption> <thead> <tr> <th>#</th> <th>Title</th> <th>Year</th> <th>Rating</th> <th>Options</th> </tr> <tr> <th>Add</th> <th><input ng-model="movie.title" class="form-control"></th> <th><input ng-model="movie.year" class="form-control"></th> <th><input ng-model="movie.rating" class="form-control"></th> <th> <button class = "btn btn-success" ng-click="addMovie()"><span class = "glyphicon glyphicon-plus"></span></button> </th> </tr> </thead> <tbody> <tr ng-repeat = "movie in movies"> <th scope="row">{{$index}}</th> <td>{{movie.title}}</td> <td>{{movie.year}}</td> <td>{{movie.rating}}</td> <td> <button ng-click="removeMovie(movie)" class="btn btn-danger"> <span class="glyphicon glyphicon-remove"></span> </button> </td> </tr> </tbody> </table> </div> </div> </body>
3 answers
solution1
1 ACCPTED 2015-10-09 21:01:58
First off, your addMovie function doesn't have access to movie , so it's probably throwing an error in the console. Change this:
factory.addMovie = function(){
to
factory.addMovie = function(movie) {
and change this:
$scope.addMovie = function(){
MoviesService.addMovie();
}
to:
$scope.addMovie = function() {
MoviesService.addMovie($scope.movie);
}
always pay attention to console errors. I made a working plunker of this in action:
solution2
0 2015-10-09 20:52:36
Inside your addMovie function, you trying to add a movie from a movie variable that does not exist in this context. So you are probably getting an error there.
solution3
0 2015-10-09 20:57:06
It looks like you're trying to do something like:
$scope.movie = {}; // add this
$scope.addMovie = addMovie; // modify to this
...
factory.addMovie = function(movie){ // add parameter movie
movies.push(movie);
};
...
give that a shot.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.