como fazer o seguinte(não tenho código ainda). Na página, possuo uma tabela com uma Row e 5 Columns e no final da Table um botão (+) e em baixo da table um botão salvar. A questão é quando eu clicar no botão (+), deveria criar outra table da mesma forma e também com o botão salvar e desta vez, em baixo do botão (+) um botão(-). Como faço isso? Se a pergunta ficou ampla, posso quebrar, mas é só uma idéia em como fazer isso, por isso não achei-a ampla. Isso será feito em usando MVC, Bootstrap e AngularJS(Esse não tenho certeza, pois é o cliente quem decide isso).
1 Resposta
Para fazer isso com angularJS você pode controlar os eventos se guiando pelos dados de seu modelo. Exemplo:
var app = angular.module("dmExample", []);
app.controller('dmExampleCtrl', function($scope) {
$scope.tables = [
[
{id: 1, dado1: "Dados 1", dado2: "Dados 1", dado3: "Dados 1", dado4: "Dados 1"},
{id: 2, dado1: "Dados 2", dado2: "Dados 2", dado3: "Dados 2", dado4: "Dados 2"},
{id: 3, dado1: "Dados 3", dado2: "Dados 3", dado3: "Dados 3", dado4: "Dados 3"},
{id: 4, dado1: "Dados 4", dado2: "Dados 4", dado3: "Dados 4", dado4: "Dados 4"},
{id: 5, dado1: "Dados 5", dado2: "Dados 5", dado3: "Dados 5", dado4: "Dados 5"}
]
];
$scope.addTable = function() {
$scope.tables.push(angular.copy($scope.tables[$scope.tables.length - 1]));
}
$scope.removeTable = function(id) {
$scope.tables.splice(id, 1);
}
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="dmExample" ng-controller="dmExampleCtrl">
<div ng-repeat="table in tables" class="table table-stripped">
<table>
<thead>
<tr>
<th>ID</th>
<td>Título 1</td>
<td>Título 2</td>
<td>Título 3</td>
<td>Título 4</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in table">
<th>{{ row.id }}</th>
<td>{{ row.dado1 }}</td>
<td>{{ row.dado2 }}</td>
<td>{{ row.dado3 }}</td>
<td>{{ row.dado4 }}</td>
</tr>
</tbody>
</table>
<button class="btn btn-danger" ng-click="removeTable($index)" ng-show="tables.length > 1">Remover Tabela</button>
</div>
<button class="btn btn-primary" ng-click="addTable()">Nova Tabela</button>
</div>
Javascript
você pode usar o métodocloneNode
para copiar a tabela, adicionar um novo botão, e adicionar a nova tabela no DOM. Esse exemplo pode dar uma ideia: jsfiddle.net/vasi_32/4wczdykc/2