我需要一个表，其行可以在单击按钮时动态添加，并且表本身可以通过另一个按钮单击来重新创建并显示在页面上
我创建了以下内容
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++;
}
}]);
一切工作正常，除了当我单击“添加表”时，上一个表以及添加的行被复制。
我只想拥有表的初始实例，其中只有一行来添加年龄和姓名。
请帮忙：
代码笔链接：http://codepen.io/anon/pen/wBwXJP http://codepen.io/anon/pen/wBwXJP
如果你通过这样做从表中创建一个对象
$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 http://codepen.io/anon/pen/gbYjRB
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
