Dynamic table with angle

Question

Dynamic table with angle

Navigation

#1 by (4 votes)

2

I'm trying to make a PivotTable where it will work as follows: - will have 2 input fields type text, one for the text value of the line and another of the column, each of them with a "add" button; - the ideal would be to be able to exclude the rows and columns after being created.

angularjs

asked by anonymous 14.07.2017 / 23:20

1 answer

Validating elements of an array in javascript Change the CSS Display property to ALL elements of a page and leave Block only for some?

score 4 · Accepted Answer

To solve this problem a filter must be created with the name range and when typing use ng-repeat to construct rows and columns, example basic:

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><scriptsrc="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>

Deleting rows and columns should be done by decreasing or increasing the values by the box, as it is a dynamic value, of course this can be implemented in each row or column, example / strong>:

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><scriptsrc="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>

Now it's up to you to creatively make the best use of both examples.

According to the comment, a example is very similar:

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><scriptsrc="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>