Question

我对AngularJS和javascript很新。我试图创建一个非常小的应用程序，允许添加用户名和年龄，然后显示添加的当前用户列表，以及他们的年龄，这里是我写的一些代码：

＆＃13;

var main = angular.module("main",[]);
main.controller("AccountController",function(){
  this.name = "";
  this.age = ""
  this.userList = [];
  
  this.addUser = function (){
    this.userList.push({name : this.name,age : this.age});
    
  };
});

＆＃13;

<body ng-app = "main" ng-controller = "AccountController as p" >
  <input type = "text" placeholder = "name" ng-model = "p.name" />  
  <input type ="number" value = 25 ng-model = "p.age"/>
  <button ng-click = "p.addUser()"> add </button>
  <ul>
    <li ng-repeat = "person in p.userList">{{person.name + ", " + person.age +" old ."}}</li>
      
  </ul>
  </body>

＆＃13;

这段代码完美无缺，但是这个代码并没有：

＆＃13;

var main = angular.module("main",[]);
main.controller("AccountController",function(){
  this.user = {name : "",age : 0}
  this.userList = [];
  
  this.addUser = function (){
    this.userList.push(this.user);
    
  };
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app = "main" ng-controller = "AccountController as p">
<input type = "text" placeholder = "name" ng-model = "p.user.name" />  
  <input type ="number" value = 16 ng-model = "p.user.age"/>
  <button ng-click = "p.addUser()"> add </button>
  <ul>
    <li ng-repeat = "person in p.userList">{{person.name + ", " + person.age +" old ."}}</li>
      
  </ul>
</body>

＆＃13;

正如您所看到并测试的那样，此代码与第一个代码不同，它会自动更改对象的属性，但第一个代码不会更改，它会创建一个新对象并且不会将更改对象绑定到最后一个对象。

我的问题是，我无法理解他们为什么不以相同的方式工作，因为它基本上以相同的方式编码。我的意思是两个代码之间的区别是什么？

Answer 1

在第一个示例中，您要创建新对象。在第二个示例中，您要向对象添加引用。

要使两个示例的行为与您可以写的相同：

this.userList.push(angular.copy(this.user));

angular.copy创建对象的深层副本。

Answer 2

尝试

this.userList.push({name : this.user.name,age : this.user.age});

我认为在第二种情况下，你推送对象本身，而不仅仅是包含在对象中的值。

ng-model不绑定属性，但它绑定对象

2 个答案: