0

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).

3
  • Bem, pensando no evento do lado cliente (click no "+"), em Javascript você pode usar o método cloneNode 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 Commented 6/04/2018 às 13:05
  • Normalmente quando preciso fazer esse tipo de coisa uso Jquery, clone e Append Commented 6/04/2018 às 13:28
  • Uma dúvida, e como fica o evento do botão? O clone trás tudo, certo? No clone posso acrescentar um novo botão(como o minus(-))?
    – pnet
    Commented 6/04/2018 às 13:54

1 Resposta 1

1

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>

1
  • Show de bola, diego.
    – pnet
    Commented 6/04/2018 às 16:11

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .