如何在angularjs一个按钮，点击添加行和表？ [英] How to add rows and table on a button click in 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
我已经创建了如下
HTML：
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>
下面是我的控制器：
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++;
}
}]);
当我点击添加表一切正常，只是罚款，与添加的行沿previous表被复制。
我想只具有表的初始实例只用一个行添加年龄和名称。
请帮助：
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笔链接： HTTP：//$c$cpen.io/anon /笔/ wBwXJP
推荐答案
如果您通过这样做从表中的对象
if you make an object from the table by doing this
$scope.tables=[{name: "table 1"}];
$scope.tables[0].rows=['row1']
这将使其更多钞票来一行添加到$ scope.tables [0] .rows
这样，它只会被加入到第一
新的您只需按下
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
，你必须改变行
<tr ng-repeat="rowContent in table.rows">
我希望这将帮助你以正确的方式
i hope this will help you in the right way
在这里，我编辑了code，使其我认为这是最好的方式。
here i edited your code to make it the way i think it is best
这篇关于如何在angularjs一个按钮，点击添加行和表？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
