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

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

Answer 1

尝试这种方式：

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

为什么呢？会发生什么？

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

之前的addBook（）

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

在addBook（）之后

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

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

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>

会奏效;

但是当我想添加另一个新项目时，最后一项会覆盖，如您在网址中看到的那样。为什么？会发生什么？

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

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

否则您将继续插入/修改相同的项目

AngularJS不会创建新对象

2 个答案: