AngularJS 不创建新对象

Question

我写了一个简单的angularJS代码：

<!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

当我向列表中添加新项目时，它可以正常工作。但是当我想添加另一个新项目时，最后一个项目会被覆盖，正如您在 url 中看到的那样。 为什么？发生了什么？

Answer 1

试试这个方法：

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

why? what happen?

发生这种情况是因为您的输入绑定到书名，当您在数组中添加书籍时，添加了相同的对象实例，因此绑定仍在发生。

在 addBook() 之前

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

在 addBook() 之后

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

使用 angular.copy 我们正在创建另一个具有相同属性值的书籍对象实例

Answer 2

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

和

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

会工作；

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

那是因为必须在插入后立即创建新书，其中：

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

否则你将inserting/modifying保留相同的项目

AngularJS 不创建新对象

AngularJS does not create new object

javascript

object

angularjs