CODEWITHSUNDEEP
javascriptangularjs
Joe Samraj
Joe Samraj

Reputation: 331

Add new row in HTML using Angular JS

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>

Upvotes: 1

Views: 1059

Answers (5)

tamil
tamil

Reputation: 118

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={};
        }

Upvotes: 1

Sravan S
Sravan S

Reputation: 136

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.

Upvotes: 2

Muhammad Waqas
Muhammad Waqas

Reputation: 1150

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>

Upvotes: 0

Thibault Friedrich
Thibault Friedrich

Reputation: 185

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.

Upvotes: 1

Silvinus
Silvinus

Reputation: 1445

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

Upvotes: 0

Related Questions