Angularjs array push UI does not get's refreshed

Question

I want to show a list of movies and add a new movie by adding it to the array.

The html file:

<!-- FOREACH the movies -->
<div ng-controller="homeController" ng-repeat="movie in movies | orderBy : order">
    <div class="movie-wrapper">
        <h1>{{movie.name}}</h1>
        <p>IMDB: <a href="{{movie.imdb_url}}" target="_blank">IMDB</a></p>
    </div>
</div>

<!-- ADD a new movie to the array -->
<div ng-controller="homeController">

   <h3>Add new movie:</h3>
   <form name="movieForm" ng-submit="addMovie(movieInfo)">
      <div class="form-group new-movie">
           <label for="Title">Title:</label>
           <input type="text" class="form-control" name="title" ng-model="movieInfo.title">
       </div>
       <div class="form-group new-movie">
           <label for="IMDB">IMDB:</label>
           <input type="text" class="form-control" name="imdb" ng-model="movieInfo.imdb">
       </div>

       <button type="submit" class="btn btn-primary">Add movie</button>
   </form>
</div>

The javascript file:

var app = angular.module('movie-app', ["ngRoute"]);
app.controller("homeController", function($scope) {
   $scope.movies = getMovies();

   // Method to add a new movie
   $scope.addMovie = function(movieInfo) {
      $scope.movies.push({
         name : movieInfo.title,
         imdb_url: movieInfo.imdb
       });

      console.log("Movie added");
   }
});

function getMovies() {
   return [{
      name: 'Inception',
      imdb_url: 'http://www.imdb.com/title/tt1375666/'
   }];
}

After pressing the submit button, in the console I did not get any error message, but somehow the UI does not get's refreshed.

I think that somehow the controller does not get a reference/bind to the same array or dom element when I'm pushing the new entry.

@Developer - why would they want to do that?

cnorthfield
– cnorthfield

2016-09-04 15:36:01 +00:00
Commented Sep 4, 2016 at 15:36 — cnorthfield
– cnorthfield, Commented Sep 4, 2016 at 15:36

Community · Accepted Answer · 2020-06-20 09:12:55Z

First of all, i'm pretty sure you should have an error in your console

You make 3 mistakes :

1. You have an error in your getMovies() function (missing curly brackets {})

function getMovies() {
   return [{
      name: 'Inception',
      imdb_url: 'http://www.imdb.com/title/tt1375666/'
   }];
}

Why curly brackets are important ?

name and imdb_url are properties object. In JavaScript, an object must have curly brackets before and after. But your function getMovies returns and array of 1 element, so you have to surround your object with brackets []

2. You also have an error when you call console.log (missing quote ")

console.log("Movie added);

3. And the last one : you have to remove the parenthesis }) (the line after console.log)

The result :

angular.module('movieApp', [])
  .controller("homeController", function($scope) {
    $scope.movies = getMovies();

    // Method to add a new movie
    $scope.addMovie = function(movieInfo) {
      $scope.movies.push({
        name: movieInfo.title,
        imdb_url: movieInfo.imdb
      });

      console.log("Movie added");
    };
  });

function getMovies() {
  return [{
    name: 'Inception',
    imdb_url: 'http://www.imdb.com/title/tt1375666/'
  }];
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="movieApp" ng-controller="homeController">

  <!-- FOREACH the movies -->
  <div ng-repeat="movie in movies | orderBy : order">
    <div class="movie-wrapper">
      <h1>{{movie.name}}</h1>
      <p>IMDB: <a href="{{movie.imdb_url}}" target="_blank">IMDB</a>
      </p>
    </div>
  </div>

  <!-- ADD a new movie to the array -->
  <div>

    <h3>Add new movie:</h3>
    <form name="movieForm" ng-submit="addMovie(movieInfo)">
      <div class="form-group new-movie">
        <label for="Title">Title:</label>
        <input type="text" class="form-control" name="title" ng-model="movieInfo.title">
      </div>
      <div class="form-group new-movie">
        <label for="IMDB">IMDB:</label>
        <input type="text" class="form-control" name="imdb" ng-model="movieInfo.imdb">
      </div>

      <button type="submit" class="btn btn-primary">Add movie</button>
    </form>
  </div>

</div>

Collectives™ on Stack Overflow

Angularjs array push UI does not get's refreshed

1 Answer 1

The result :

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

The result :

Comments

Your Answer

Sign up or log in

Post as a guest

Related