How to pass data from one table to another with checkbox?

Question

How to pass data from one table to another with checkbox?

Navigation

#1 by (0 votes)

0

Hello everyone. I am new to web programming and am currently studying some concepts of Angular. My problem is this: pass the selected items from one table, per checkbox, to another table. can anybody help me? Many thanks!

angularjs

asked by anonymous 13.08.2017 / 20:56

1 answer

This changing global var empty input value on forms with auto complete

score 0 · Accepted Answer

You only need to filter the second table according to the attribute selected in the first one:

angular
  .module('ModuloTabelas', [])
  .controller('ControllerTabelas', ControllerTabelas);

ControllerTabelas.$inject = [];

function ControllerTabelas() {
  var tabelas = this;
  tabelas.dados = [];

  iniciar();

  function iniciar() {
    tabelas.dados.push({
      codigo: 1,
      selecionado: false,
      texto: 'opcao 1'
    });
    tabelas.dados.push({
      codigo: 2,
      selecionado: false,
      texto: 'opcao 2'
    });
    tabelas.dados.push({
      codigo: 3,
      selecionado: false,
      texto: 'opcao 3'
    });
    tabelas.dados.push({
      codigo: 4,
      selecionado: false,
      texto: 'opcao 4'
    });
    tabelas.dados.push({
      codigo: 5,
      selecionado: false,
      texto: 'opcao 5'
    });
  }
}

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  display:inline-block;
  vertical-align: text-top;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr {
  height: 37px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><divng-app="ModuloTabelas">
  <div ng-controller="ControllerTabelas as tabelas">
    <table>
      <thead>
        <tr>
          <th colspan="3">
            Opções
          </th>
        </tr>
        <tr>
          <th>
          </th>
          <th>
            Código
          </th>
          <th>
            Texto
          </th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="linhaTb1 in tabelas.dados track by linhaTb1.codigo">
          <td>
            <input type="checkbox" ng-model="linhaTb1.selecionado" />
          </td>
          <td>
            {{linhaTb1.codigo}}
          </td>
          <td>
            {{linhaTb1.texto}}
          </td>
        </tr>
      </tbody>
    </table>
  
    <table>
      <thead>
        <tr>
          <th colspan="3">
            Filtradas
          </th>
        </tr>
        <tr>
          <th>
            Código
          </th>
          <th>
            Texto
          </th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="linhaTb2 in tabelas.dados | filter: {selecionado: true} track by linhaTb2.codigo">
          <td>
            {{linhaTb2.codigo}}
          </td>
          <td>
            {{linhaTb2.texto}}
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>