2

estou tentando fazer uma tabela dinamica, onde vai funcionar da seguinte forma: - vão ter 2 campos input tipo texto, um para o valor texto da linha e outro da coluna, cada um deles com um botão "adicionar"; - o ideal seria ter a possibilidade de poder excluir as linhas e colunas depois de criada.

12
  • E ai Isa era isso que você precisava?
    – novic
    17/07/2017 às 19:44
  • E ai Isa estou aqui novamente para te perguntar e ai a resposta te serviu?
    – novic
    19/07/2017 às 0:14
  • @VirgilioNovic não resolveu mas ajudou. obrigada
    – Isa
    19/07/2017 às 12:00
  • Faltou os botões de adcionar as colunhas e linhas em vez de digitar ? Se voce interagir a gente pode moldar
    – novic
    19/07/2017 às 12:13
  • 1
    está ai exemplo parecido com Vue! espero que goste!
    – novic
    20/07/2017 às 14:33

1 Resposta 1

4

Para solucionar esse problema deve ser criado um filter com o nome de range e no momento da digitação utilizar ng-repeat para construir linhas e colunas, exemplo básico:

var app = angular.module("app", []);
app.filter('range', function() {
  return function(input, total) {
    total = parseInt(total);
    for (var i = 0; i < total; i++) {
      input.push(i);
    }
    return input;
  };
});

app.controller("ctrl", ["$scope", function($scope) {
  $scope.line = 3;
  $scope.column = 4;
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <div> Linha:
    <input ng-model="line">
  </div>
  <div> Coluna:
    <input ng-model="column">
  </div>
  <table border="1">
    <tr ng-repeat="l in [] | range:line">
      <td ng-repeat="c in [] | range: column">{{l + 1}} : {{c + 1 }}</td>
      <tr>
  </table>
</div>


A exclusão de linhas e colunas deve ser feita diminuindo ou aumentando os valores pela caixa, por ser um valor dinâmico, claro que isso pode ser implementado em cada linha ou coluna, exemplo:

var app = angular.module("app", []);
app.filter('range', function() {
  return function(input, total) {
    total = parseInt(total);
    for (var i = 0; i < total; i++) {
      input.push(i);
    }
    return input;
  };
});

app.controller("ctrl", ["$scope", function($scope) {
  $scope.line = 3;
  $scope.column = 4;
  $scope.delLine = function(){
    if ($scope.line > 0) $scope.line--;
  }
  $scope.delColumn = function(){
    if ($scope.column > 0) $scope.column--;
  }
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <div> Linha:
    <input ng-model="line">
  </div>
  <div> Coluna:
    <input ng-model="column">
  </div>
  <table border="1">
    <tr ng-repeat="l in [] | range:line">
      <td ng-repeat="c in [] | range: column">
      <button type="button" ng-click="delLine()">Remover Linha</button>
      <button type="button" ng-click="delColumn()">Remover Coluna</button>
      </td>
      <tr>
  </table>
</div>

Agora é com você vai de sua criatividade utilizar da melhor forma os dois exemplos.


Conforme o comentário, um exemplo bem parecido:

var app = angular.module("app", []);
app.filter('range', function() {
  return function(input, total) {
    total = parseInt(total);
    for (var i = 0; i < total; i++) {
      input.push(i);
    }
    return input;
  };
});

app.controller("ctrl", ["$scope", function($scope) {
  // criando variavel de perguntas
  $scope.answer = ["Sim", "Não"];
  // criando variavel de questão
  $scope.question = [{
      'name': "P 1",
      'r': [false, false]
    },
    {
      'name': "P 2",
      'r': [false, false]
    }
  ];
  // adicionando pergunta 
  $scope.addAnswer = function() {
    $scope.answer.push("R" + (new Date().getTime()));
    for (i = 0; i < $scope.question.length; i++) {
      $scope.question[i].r.push('false');
    }
  };
  // excluindo pergunta
  $scope.delAnswer = function(index) {
    $scope.answer.splice(index, 1);
    for (i = 0; i < $scope.question.length; i++) {
      $scope.question[i].r.splice(index - 1, 1);
    }
  };
  // adicionando questão
  $scope.addQuestion = function() {
    $r = $scope.answer.map(function() {
      return false;
    });
    $scope.question.push({
      'name': 'P' + (new Date().getTime()),
      'r': $r
    });
  };
  // excluindo questão
  $scope.delQuestion = function(index){
      $scope.question.splice(index, 1);
  }
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <div>
    <table border="0">
      <tr>
        <td>Perguntas:</td>
        <td ng-repeat="a in answer">
          <input value="{{a}}" style="width:40px" />
          <button ng-click="delAnswer($index)"> - </button>
        </td>
        <td><button type="button" ng-click="addAnswer()"> + </button></td>
      </tr>
      <tr ng-repeat="q in question">
        <td><input value="{{q.name}}" /></td>
        <td ng-repeat="b in q.r track by $index">
          <input type="radio" name="{{q.name}}" />
        </td>
        <td><button ng-click="delQuestion($index)"> - </button>
      </tr>
      <tr>
        <td>
          <button ng-click="addQuestion()"> + </button>
        </td>
        <tr>
    </table>
  </div>
</div>

Referencias:

0

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 .