Question

我需要一个表，其行可以在按钮点击时动态添加，表格本身可以重新创建并显示在页面上，点击另一个按钮

我创建了以下内容 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>

这是我的控制器：

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++;
   }
}]);

一切正常，但是当我点击Add Table时，会复制上一个表以及添加的行。我想只用一行来创建表的初始实例来添加年龄和名称。请帮忙：

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

Answer 1

如果您通过执行此操作从表中创建对象

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

这样就可以在$ scope.tables [0] .rows中添加一行这样它只会被添加到第一个对于新的你只需按

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

它将创建一个全新的表

，您必须更改

中的行

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

我希望这会以正确的方式帮助你

在这里，我编辑了你的代码，使其成为我认为最好的方式

code

如何在angularjs上单击按钮添加行和表？

1 个答案: