如何在angularjs中添加按钮单击的行和表?

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:

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

除了当我单击Add Table时，前面的表以及添加的行会被复制之外，其他的都可以正常工作。我只想要表的初始实例，只有一行可以添加年龄和名称。请帮助:

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

代码笔链接:http://codepen.io/anon/pen/wBwXJP

1 个解决方案

#1

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[0]。那样的话，它将只会被添加到第一个您刚刚推动的新

 $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

代码

#1