Javascript 使用Angular JS在HTML中添加新行
我是AngularJS的新手，我有两个文本框，即姓名、年龄。我想将文本框中输入的姓名和年龄添加到HTML表中。当我使用下面的代码时，它第一次将行添加到表中，如果我尝试添加更多行，它将修改表中添加的最后一行。我在这里传递employee对象Javascript 使用Angular JS在HTML中添加新行,javascript,angularjs,Javascript,Angularjs,我是AngularJS的新手，我有两个文本框，即姓名、年龄。我想将文本框中输入的姓名和年龄添加到HTML表中。当我使用下面的代码时，它第一次将行添加到表中，如果我尝试添加更多行，它将修改表中添加的最后一行。我在这里传递employee对象 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> &
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="Scripts/angular.min.js" type="text/javascript"></script>
<link href="Styles/StyleSheet.css" rel="stylesheet" type="text/css" />
<title></title>
<script>
var myApp = angular.module("myApp", []);
var myController = myApp.controller("myController", function ($scope) {
$scope.employees = [
{ name: "Joe", age: "20" },
{ name: "Sam", age: "27" }
];
$scope.addEmp = function (emp) {
$scope.employees.push(emp);
}
});
</script>
</head>
<body ng-app="myApp">
<div ng-controller="myController">
<table>
<tr>
<td>Name</td>
<td>Age</td>
</tr>
<tr ng-repeat="employee in employees">
<td>{{employee.name}}</td>
<td>{{employee.age}}</td>
</tr>
</table>
Name<input id="Name" type="text" ng-model="emp.name"/>
Age<input id="Age" type="text" ng-model="emp.age"/>
<input type="button" ng-click="addEmp(emp)" />
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="Scripts/angular.min.js" type="text/javascript"></script>
<link href="Styles/StyleSheet.css" rel="stylesheet" type="text/css" />
<title></title>
<script>
var myApp = angular.module("myApp", []);
var myController = myApp.controller("myController", function ($scope) {
$scope.employees = [
{ name: "Joe", age: "20" },
{ name: "Sam", age: "27" }
];
$scope.addEmp = function (name, age) {
$scope.employees.push({name:name,age:age});
}
});
</script>
</head>
<body ng-app="myApp">
<div ng-controller="myController">
<table>
<tr>
<td>Name</td>
<td>Age</td>
</tr>
<tr ng-repeat="employee in employees">
<td>{{employee.name}}</td>
<td>{{employee.age}}</td>
</tr>
</table>
Name<input id="Name" type="text" ng-model="name"/>
Age<input id="Age" type="text" ng-model="age"/>
<input type="button" ng-click="addEmp(name,age)" />
</div>
</body>
</html>
这是因为在firts示例中，您在范围中绑定了一个名为emp的对象。 此对象引用由角度保持。 因此，这是第一次，在范围内创建具有属性名称和年龄的对象emp。将对象添加到数组中。 但是第二次emp对象已经创建，您只是更新对象，而不是创建另一个
在第二个示例中，您每次单击按钮时都会创建一个新的emp实例，这是因为在第一个示例中，您在范围中绑定了一个名为emp的对象。 此对象引用由角度保持。 因此，这是第一次，在范围内创建具有属性名称和年龄的对象emp。将对象添加到数组中。 但是第二次emp对象已经创建，您只是更新对象，而不是创建另一个
在第二个示例中，每次单击javascript中的按钮时，您都会创建一个新的emp实例，当存在对象时，函数参数通过引用给出。在您的情况下，当您给出emp时，您给出了一个指向emp的指针，因此您的函数$scope.addamp尝试在数组中再次插入相同的对象，而在数组中这是不可能的
在第二个示例中，您创建了一个新对象，因此一切正常。在javascript中，当存在对象时，函数的参数通过引用给出。在您的情况下，当您给出emp时，您给出了一个指向emp的指针，因此您的函数$scope.addamp尝试在数组中再次插入相同的对象，而在数组中这是不可能的
在第二个示例中，您创建了一个新对象，因此一切正常。我刚刚编辑了您的代码，它工作正常
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="Scripts/angular.min.js" type="text/javascript"></script>
<link href="Styles/StyleSheet.css" rel="stylesheet" type="text/css" />
<title></title>
<script>
var myApp = angular.module("myApp", []);
var myController = myApp.controller("myController", function ($scope) {
/*
here you define array and initlize objects too thats fine
*/
$scope.employees = [
{ name: "Joe", age: "20" },
{ name: "Sam", age: "27" }
];
$scope.addEmp = function (name, age) {
$scope.list={};//create new object
$scope.list.name=name;
$scope.list.age=age;
$scope.employees.push($scope.list);
}
});
</script>
</head>
<body ng-app="myApp">
<div ng-controller="myController">
<table>
<tr>
<td>Name</td>
<td>Age</td>
</tr>
<tr ng-repeat="employee in employees">
<td>{{employee.name}}</td>
<td>{{employee.age}}</td>
</tr>
</table>
Name<input id="Name" type="text" ng-model="name"/>
Age<input id="Age" type="text" ng-model="age"/>
<input type="button" ng-click="addEmp(name,age)" />
</div>
</body>
</html>
我刚刚编辑了你的代码，它工作得很好
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="Scripts/angular.min.js" type="text/javascript"></script>
<link href="Styles/StyleSheet.css" rel="stylesheet" type="text/css" />
<title></title>
<script>
var myApp = angular.module("myApp", []);
var myController = myApp.controller("myController", function ($scope) {
/*
here you define array and initlize objects too thats fine
*/
$scope.employees = [
{ name: "Joe", age: "20" },
{ name: "Sam", age: "27" }
];
$scope.addEmp = function (name, age) {
$scope.list={};//create new object
$scope.list.name=name;
$scope.list.age=age;
$scope.employees.push($scope.list);
}
});
</script>
</head>
<body ng-app="myApp">
<div ng-controller="myController">
<table>
<tr>
<td>Name</td>
<td>Age</td>
</tr>
<tr ng-repeat="employee in employees">
<td>{{employee.name}}</td>
<td>{{employee.age}}</td>
</tr>
</table>
Name<input id="Name" type="text" ng-model="name"/>
Age<input id="Age" type="text" ng-model="age"/>
<input type="button" ng-click="addEmp(name,age)" />
</div>
</body>
</html>
现在发生的是JavaScript特性。当你推 $scope.employees.pushemp 在数组中，该特定对象将被添加到ArrayObject中，数组通过引用推送，您对该对象所做的任何更改都将发生在最后一个元素上。将对象引用推送到数组上时，只是传递引用，而不是复制对象。但是当你使用 $scope.employees.push{name:name，age:age}
正在创建一个新对象并将其推入数组，即每次调用addamp时，都会创建一个新对象并将其引用到数组中。发生的是JavaScript特性。当你推 $scope.employees.pushemp 在数组中，该特定对象将被添加到ArrayObject中，数组通过引用推送，您对该对象所做的任何更改都将发生在最后一个元素上。将对象引用推送到数组上时，只是传递引用，而不是复制对象。但是当你使用 $scope.employees.push{name:name，age:age}
正在创建一个新对象并将其推入数组，即每次调用addamp时，都会创建一个新对象并将其引用到数组中。在这两种情况下都有效，请参见。在代码中，您使用的是angular的旧版本。使用我在下面提到的链接
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
在这两种情况下都有效，请参见。在代码中，您使用的是angular的旧版本。使用我在下面提到的链接
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
在第一个cash emp中，它只是一个黑色变量，没有数据，但在第二个案例中，有一个定义了数据的变量，您使用的是哪个版本的angularjs？两个版本似乎都很好用。在第一个cash emp中，它只是一个黑色变量，没有数据，但在第二个案例中，有一个定义了数据的变量，您使用的是哪个版本的angularjs？两个版本似乎都很好用。在给出解释之前，你真的测试过代码吗？在给出解释之前，你真的测试过代码吗？在给出解释之前，你真的测试过代码吗？在给出解释之前，你真的测试过代码吗？如果我替换$scope.employees.pushemp；到$scope.employees.pushangular.copyemp；工作正常。所以它是通过引用而不是通过值传递的。感谢您的回复，如果我替换$scope.employees.pushemp；到$scope.employees.pushangular.copyemp；工作正常。所以它是通过引用而不是通过值传递的。谢谢你的回复