CODEWITHSUNDEEP
javascriptangularjs
Recon
Recon

Reputation: 35

AngularJS Factory Service

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>

Upvotes: 0

Views: 42

Answers (3)

wesww
wesww

Reputation: 2873

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:

http://plnkr.co/edit/AXNhovhKrW24FLOt9KGM?p=preview

Upvotes: 1

Kevin Friedheim
Kevin Friedheim

Reputation: 324

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.

Upvotes: 0

Fernando Pinheiro
Fernando Pinheiro

Reputation: 1816

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.

Upvotes: 0

Related Questions