Question

我是AngularJS的新手，我有两个文本框，名称，年龄。我想将文本框中输入的名称和年龄添加到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 (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>

Answer 1

发生了什么是JavaScript的特质。当你按

$ scope.employees.push（EMP）;

进入数组，特定对象被添加到数组中（对象和数组是通过引用推送的），你对对象所做的改变将发生在最后一个元素上。将对象引用推送到数组时，您只是传递引用，而不是复制对象。但是当你使用

时

$ scope.employees.push（{名称：姓名，年龄：年龄}）;

正在创建一个新对象并将其推送到数组中，即每次调用 addEmp（）时，都会创建一个新对象并将其引用到数组中。

Answer 2

在javascript中，当有对象时，函数的参数由引用给出。在你的情况下，当你给emp时，你给了emp的指针，所以你的函数$ scope.addEmp尝试在数组中第二次插入相同的对象，而在数组中是不可能的

在第二个示例中，您创建了一个新对象，以便一切正常。

Answer 3

我刚编辑了您的代码并且工作正常

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

Answer 4

在两个案例中都可以看到plunker。在您的代码中，您使用的是旧版角度。使用我在下面提到的链接角度。

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

在添加一行之后，你需要清空当前对象。

 $scope.addEmp = function (emp) {
            $scope.employees.push(emp);
           $scope.emp={};
        }

Answer 5

这是因为在你的firts示例中，你绑定了一个名为emp的对象。此对象引用由角度保持。所以这是第一次，angular使用属性名称和范围内的年龄创建对象emp。您在数组中添加对象。但第二次emp对象已经创建，你只需更新对象而不是创建另一个。

在第二个示例中，每次单击按钮

时都会创建一个新的emp实例

使用Angular JS在HTML中添加新行

5 个答案: