How to add rows and table on a button click in angularjs?

Question

I need a table whose rows can be added dynamically on a button click and the table itself can be re-created and shown on the page with another button click

I have created the following HTML:

<html ng-app="MyApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>Add Rows</title>
    <link href="http://cdn.foundation5.zurb.com/foundation.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
  </head>
  <body ng-controller="MainController">
     <a href="#" 
        class="button" 
        ng-click="addRow()">
        Add Row</a>
     <a href="#" 
        class="button" 
        ng-click="addTable()">
        Add Table </a>
  <div ng-repeat="data in table">  
     <table>
        <thead>
           <tr>
              <th width="200">Name</th>
              <th width="200">Age</th>
           </tr>
       </thead>
       <tbody>
          <tr ng-repeat="rowContent in rows">
             <td>
                <input type="text">
             </td> 
             <td>
                <input type="text">
             </td>
          </tr>
       </tbody>
    </table>
    <div>
</body>
</html>

Here's my Controller:

angular.module('MyApp', [])
.controller('MainController', [ '$scope', function($scope) {
   $scope.table=['Table 1'];
   $scope.rows = ['Row 1'];
   $scope.counter = 3;
   $scope.addRow = function() {
      $scope.rows.push('Row ' + $scope.counter);
      $scope.counter++;
   }
   $scope.addTable = function() {
      $scope.table.push('Table ' + $scope.counter);
      $scope.counter++;
   }
}]);

Everything works fine except that when I click on Add Table , The previous table along with the added rows gets copied. I want to just have the initial instance of the table with just one row to add age and name. Please help:

Code pen Link :http://codepen.io/anon/pen/wBwXJP

You have 1 array of rows. You need a separate array of rows per table. — Danny
– Danny, Commented Nov 10, 2014 at 14:26
Say you have 3 tables. You click "Add row". To which table should this row be appended then? — dfsq
– dfsq, Commented Nov 10, 2014 at 14:27

joey · Accepted Answer · 2014-11-10 15:04:10Z

2

if you make an object from the table by doing this

 $scope.tables=[{name: "table 1"}];
 $scope.tables[0].rows=['row1']

this will make it posible to add a row to $scope.tables[0].rows that way it will only be added to the first for new you just push

 $scope.tables.push({name: 'Table ' + $scope.counter});

and it will create a whole new table

and you have to change rows in

<tr ng-repeat="rowContent in table.rows">

i hope this will help you in the right way

here i edited your code to make it the way i think it is best

code

edited Nov 10, 2014 at 15:04

answered Nov 10, 2014 at 14:28

joey

4662 gold badges6 silver badges23 bronze badges

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

5 Comments

dfsq Over a year ago

That's how I would also do that. Only the question with appending new rows still exists.

joey Over a year ago

the best way i think is add a add row button beneat each table and send the table with it to a function and then add a row to that table.

dfsq Over a year ago

Yes, but not with current OP's layout when they have this nice top buttons.. Anyway, your answer is how it should be done.

user3595524 Over a year ago

Ive a larger problem at hand now...how do i seperate the ng-model for each input fields?

joey Over a year ago

just use an other model for each field if you want a seperate ID or something you can do id="userName{{$index}}" but this is an other problem this one is solved so mark it as solved and create a new post please.

Collectives™ on Stack Overflow

How to add rows and table on a button click in angularjs?

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related