AngularJS не создает новый объект

я написать простой angularJS код: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-адресе. Почему? что происходит?

источник

2015-02-15 ali

Не должно быть: нг-модель = "book.name" вместо: ng-model = aBook.name – Manube

@Manube Нет, переименование 'aBook' на' book' не решает проблему, поскольку вы можете протестировать по адресу. – ali

Попробуйте так:

$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 мы создаем еще один экземпляр книги объекта с таким же свойством значения

источник

2015-02-15 16:02:25 karaxuna

Я хочу понять, что происходит и почему? Благодарю. – ali

@ali посмотреть отредактированный ответ – karaxuna

ok. поэтому я предпочитаю очищать объект области после добавления: $ scope.books.push (newBook); $ scope.aBook = {}; ' спасибо. – ali

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

будет работать;

, но когда я хочу добавить еще один новый элемент, последний элемент переписывается, как вы можете видеть в URL-адресе. Зачем? что происходит?

это потому, что newbook должен быть создан сразу после включения, с:

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

иначе вы будете держать вставки/модификации и тот же элемент

источник

2015-02-15 16:03:39 Manube

Я удалил свой предыдущий «ответ», так как это был скорее комментарий, чем что-либо еще, как было предложено jsve – Manube

ok. поэтому я предпочитаю очищать объект области после добавления: $ scope.books.push (newBook); $ scope.aBook = {}; ' спасибо. – ali

AngularJS не создает новый объект

ответ

Смежные вопросы