0
You only need to filter the second table according to the attribute selected in the first:
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>
<div ng-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>
You can put the code you have so far as an example?
– Sorack