push data from input text to table - Angularjs

Question

I have 2 input text

<input type="text" ng-model="name">
<input type="text" ng-model="lastname">

I have a table :

             <table>
                <thead>
                    <th>Name</th>
                    <th>Last Name</th>
                </thead>
                <tbody>
                    <tr ng-repeat="row in customers">
                        <td>{{row.fname}}</td>
                        <td>{{row.lname}}</td>
                    </tr>
                </tbody>
            </table>

I want to push data from name and last name text boxes into a row in the table using angularjs, any help?

do you have some button which pushes the data into the $scope.customers ? — Manas
– Manas, Commented May 17, 2017 at 7:04

Manas · Accepted Answer · 2017-05-17 07:10:05Z

2

Just create a new customer object on the click of a button and push it into the customers array. When you add the customer object, the row shall be created.

<button ng-click="createCustomer()">Push</button>

In the controller,

$scope.createCustomer = function(){
 customers.push(new Customer($scope.name,$scope.lastname));
}

var Customer = function(name,lastname){
 this.fname = name;
 this.lname = lastname;
}

edited May 17, 2017 at 7:10

answered May 17, 2017 at 7:07

Manas

8481 gold badge7 silver badges16 bronze badges

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

3 Comments

Elio Chamy Over a year ago

example please ?

Manas Over a year ago

edited the answer for your reference and added the code. By creating a new object of customer and adding it into the array, you tell the ng-repeat in view to add a new row

Elio Chamy Over a year ago

the 2 solutions working, but the second one is more close to my code (habits), working thank you !

tomek550 · Accepted Answer · 2017-05-17 07:09:52Z

1

In your controller create a function which will store customer in customers array.

in template

<input type="text" ng-model="name">
<input type="text" ng-model="lastname">
<button ng-click="addCustomer(name, lastname)>Add</button>

in controller

$scope.customers = [];
$scope.addCustomer(name, lastname){
     $scope.customers.push({ fname:name, lname:lastname });
}

answered May 17, 2017 at 7:09

tomek550

4704 silver badges15 bronze badges

Collectives™ on Stack Overflow

push data from input text to table - Angularjs

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related