AngularJS does not create new object

Question

i write a simple angularJS code:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.1/angular.min.js"></script>
</head>
<body ng-app="myApp">
  <script>
    angular.module('myApp', []).controller('BooksController', function($scope){
      $scope.books = [{'name':'aaa'}, {'name':'bbb'}, {'name':'ccc'}];
      $scope.addBook = function(newBook){
          $scope.books.push(newBook);
      }
    });
  </script>
  <div ng-controller="BooksController">
      <ul>
          <li ng-repeat="book in books">{{book.name}}</li>
      </ul>
      <input ng-model=aBook.name />
      <a href=# ng-click="addBook(aBook)">add to list</a>
  </div>
</body>
</html>

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

when i add a new item to the list, it works correctly. but when i want to add another new item, the last item overwrite as you can see in the url. why? what happen?

Shouldn't it be: ng-model="book.name" instead of: ng-model=aBook.name — Manube
– Manube, Commented Feb 15, 2015 at 15:56
@Manube No, renaming aBook to book doesn't solve the problem as you can test at the address. — ali
– ali, Commented Feb 15, 2015 at 15:59

harshtuna · Accepted Answer · 2015-02-15 16:19:25Z

2

Try this way:

$scope.addBook = function(newBook){
    $scope.books.push(angular.copy(newBook));
}

why? what happen?

This happens because your input is bound to book's name, when you are adding book in array, same object instance is added, so binding is still happening.

before addBook()

$scope.books = [{'name':'aaa'}, {'name':'bbb'}, {'name':'ccc'}];

after addBook()

$scope.books = [{'name':'aaa'}, {'name':'bbb'}, {'name':'ccc'}, aBook];

With angular.copy we are creating another instance of book object with same property values

edited Feb 15, 2015 at 16:19

harshtuna

7575 silver badges14 bronze badges

answered Feb 15, 2015 at 16:02

karaxuna

26.9k13 gold badges86 silver badges120 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ali Over a year ago

ok. so i prefer to empty the object of scope after add: $scope.books.push(newBook);$scope.aBook={}; thanks.

Manube · Accepted Answer · 2015-02-15 16:13:06Z

1

$scope.addBook = function(newBook){
      $scope.books.push($scope.newbook);
      $scope.newbook={"name":""};
      $scope.$apply();
  }
  $scope.newbook={"name":""};

and

<input ng-model="newbook.name" type="text">
  <a href=# ng-click="addBook()">add</a>

will work;

but when i want to add another new item, the last item overwrite as you can see in the url. why? what happen?

that's because a newbook has to be created right after insertion, with:

$scope.newbook={"name":""};

otherwise you will keep inserting/modifying the same item

edited Feb 15, 2015 at 16:13

answered Feb 15, 2015 at 16:03

Manube

5,2294 gold badges38 silver badges61 bronze badges

2 Comments

Manube Over a year ago

i deleted my previous 'answer', as it was more a comment than anything else, as suggested by jsve

ali Over a year ago

ok. so i prefer to empty the object of scope after add: $scope.books.push(newBook);$scope.aBook={}; thanks.

Collectives™ on Stack Overflow

AngularJS does not create new object

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related