Add new row in HTML using Angular JS

Question

I am new to AngularJS, I have two text boxes namely Name,Age. I want to add the name and age entered in the text box to HTML table. When I use the below code it adds the row to the table for the first time and if I try to add more row, it modifies the last row added in the table. I'm passing the employee object here.

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

But when I pass the name and age separately as given below it works fine. Why this is happening?

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

in first cash "emp" it's just black variable there no data but in second case there variable with data defined — Nikhil Vaghela
– Nikhil Vaghela, Commented May 13, 2016 at 6:10
which version of angularjs are you using ? Both versions seem to work fine. see demo — nalinc
– nalinc, Commented May 13, 2016 at 6:12

Sravan S · Accepted Answer · 2016-05-13 06:18:27Z

2

What's happening is a JavaScript idiosyncrasy. When you push

$scope.employees.push(emp);

into the array, that specific object is being added into the array(Objects and arrays are pushed by reference), what ever changes you do to the object will happen to the last element. When you push an object reference onto an array, you're just passing a reference, not copying the object. But when you use

$scope.employees.push({name:name,age:age});

a new object is being created and is pushed into the array, ie, each time you call addEmp(), a new object is created and referred into the array.

answered May 13, 2016 at 6:18

Sravan S

1362 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Joe Samraj Over a year ago

If I replace $scope.employees.push(emp); to $scope.employees.push(angular.copy(emp)); its working fine. So its passed by reference not by value. Thanks for your reply

Thibault Friedrich · Accepted Answer · 2016-05-13 06:13:06Z

1

In javascript, parameters of function are given by reference when there are object. In your situation, when you give emp, you give a pointer to emp and so your function $scope.addEmp try to insert a second time the same object in your array whereas it is impossible in a array.

In your second example, you create a new object so everything is ok.

answered May 13, 2016 at 6:13

Thibault Friedrich

1852 silver badges12 bronze badges

1 Comment

nalinc Over a year ago

did you actually tested the code before giving explanations ? see

tamil · Accepted Answer · 2016-05-13 06:26:12Z

1

Works in both the cases see plunker. In your code you are using the older version of angular. Use the link angular I mentioned in the below.

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

also after adding the one row u need to empty the current object.

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

edited May 13, 2016 at 6:26

answered May 13, 2016 at 6:21

tamil

1181 gold badge1 silver badge7 bronze badges

Comments

Silvinus · Accepted Answer · 2016-05-13 06:11:13Z

0

It's because in your firts sample you bind an object named emp in your scope. This object reference is kept by angular. So this first time, angular create the object emp with property name and age in scope. You add the object in your array. But the second time the emp object is already created and you just update the object not create another.

In your second sample you create a new instance of emp each time you click on the button

answered May 13, 2016 at 6:11

Silvinus

1,4459 silver badges16 bronze badges

1 Comment

nalinc Over a year ago

did you actually tested the code before giving explanations ? see

Muhammad Waqas · Accepted Answer · 2016-05-13 06:15:08Z

I have just Edited Your Code and its working fine

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

Collectives™ on Stack Overflow

Add new row in HTML using Angular JS

5 Answers 5

1 Comment

1 Comment

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related