Criação de um filtro duplo
Ola a todos eu estou tentando criar 2 filtros porem quando seto o filtro 2 o filtro 1 perde a informação. Preciso que os 2 fiquem filtrados na tabela
Alguem me ajuda Obrigado
HTML
<div class="col s4 m4 l4">
<select ng-model="tipoSelecionado" ng-change="mudarPesquisa(tipoSelecionado, pesquisaValue)" material-select>
<option value="idAtividade">ID</option>
<option value="tipo">Origem</option>
<option value="centro">Centro</option>
<option value="modelo.modelo">Modelo</option>
<option value="modelo.codSap">Codigo SAP</option>
<option value="nfChegada">Nf Chegada</option>
<option value="finalizado">Situação</option>
<option value="idSap">ID do Sap</option>
<option value="numeroSerie">Numero de série</option>
</select>
</div>
<div class="col s8 m8 l8 posSearch">
<div class="col s12">
<input type="text" ng-model="pesquisaValue" placeholder="Pesquisar" ng-change="mudarPesquisa(tipoSelecionado,pesquisaValue)">
</div>
</div>
<div class="col s4 m4 l4">
<select ng-model="" ng-change="mudarPesquisatwo(tipoSelecionadotwo, pesquisaValuetwo)" material-select>
<option value="idAtividade">ID</option>
<option value="tipo">Origem</option>
<option value="centro">Centro</option>
<option value="modelo.modelo">Modelo</option>
<option value="modelo.codSap">Codigo SAP</option>
<option value="nfChegada">Nf Chegada</option>
<option value="finalizado">Situação</option>
<option value="idSap">ID do Sap</option>
<option value="numeroSerie">Numero de série</option>
</select>
</div>
<div class="col s8 m8 l8 posSearch">
<div class="col s12">
<input type="text" ng-model="pesquisaValuetwo" placeholder="Pesquisar" ng-change="mudarPesquisatwo(tipoSelecionadotwo,pesquisaValuetwo)">
</div>
</div>
<div class="white">
<table>
<thead>
<tr>
<td><strong>ID</strong><i class="fa fa-sort right mousePointerHover" ng-click="ordenarAtividade('idAtividade')"></i></td>
<td><strong>Origem</strong><i class="fa fa-sort right mousePointerHover" ng-click="ordenarAtividade('tipo')"></i></td>
<td><strong>Centro</strong><i class="fa fa-sort right mousePointerHover" ng-click="ordenarAtividade('centro')"></i></td>
<td><strong>Modelo</strong><i class="fa fa-sort right mousePointerHover" ng-click="ordenarAtividade('modelo.modelo')"></i></td>
<td><strong>Codigo SAP</strong><i class="fa fa-sort right mousePointerHover" ng-click="ordenarAtividade('modelo.codSap')"></i></td>
<td><strong>NF Chegada</strong><i class="fa fa-sort right mousePointerHover" ng-click="ordenarAtividade('nfChegada')"></i></td>
<td><strong>Situação</strong><i class="fa fa-sort right mousePointerHover" ng-click="ordenarAtividade('finalizado')"></i></td>
<td><strong>ID do SAP</strong><i class="fa fa-sort right mousePointerHover" ng-click="ordenarAtividade('chegada')"></i></td>
<td><strong>Serie</strong><i class="fa fa-sort right mousePointerHover" ng-click="ordenarAtividade('chegada')"></i></td>
</tr>
</thead>
<tbody>
<tr ng-click="showAtividade($index, atividade)" ng-class="{'blue': estaNaLista(atividade)}" ng-repeat="atividade in filtered = (atividades| filter:pesquisarAtividade | orderBy:ordenacaoAtividade) | paginate: paginacao.paginaAtual: paginacao.numeroPorPaginas">
<td>{{atividade.idAtividade}}</td>
<td>{{atividade.tipo}}</td>
<td>{{atividade.centro}}</td>
<td>{{atividade.modelo.modelo}}</td>
<td>{{atividade.modelo.codSap}}</td>
<td>{{atividade.nfChegada}}</td>
<td>{{atividade.finalizado}}</td>
<td>{{atividade.idSap}}</td>
<td>{{atividade.numeroSerie}}</td>
</tr>
</tbody>
</table>
JS
$scope.ordenarAtividade = function(ordenar) {
if ($scope.ordenacaoAtividade === undefined || $scope.ordenacaoAtividade.indexOf("-") != -1) {
$scope.ordenacaoAtividade = ordenar;
} else {
$scope.ordenacaoAtividade = "-" + ordenar;
}
};
$scope.mudarPesquisatwo = function(tipoSelecionadotwo, pesquisaValuetwo) {
$scope.atividadesSelecionadas = [];
$scope.visualizar = false;
criarVariavelDePesquisatwo();
if (tipoSelecionadotwo === 'idAtividade') {
$scope.pesquisarAtividade.idAtividade = pesquisaValuetwo;
} else if (tipoSelecionadotwo === 'tipo') {
$scope.pesquisarAtividade.tipo = pesquisaValuetwo;
} else if (tipoSelecionadotwo === 'modelo.modelo') {
$scope.pesquisarAtividade.modelo.modelo = pesquisaValuetwo;
} else if (tipoSelecionadotwo === 'modelo.codSap') {
$scope.pesquisarAtividade.modelo.codSap = pesquisaValuetwo;
} else if (tipoSelecionadotwo === 'nfChegada') {
$scope.pesquisarAtividade.nfChegada = pesquisaValuetwo;
} else if (tipoSelecionadotwo === 'centro') {
$scope.pesquisarAtividade.centro = pesquisaValuetwo;
} else if (tipoSelecionadotwo === 'finalizado') {
$scope.pesquisarAtividade.finalizado = pesquisaValuetwo;
} else if (tipoSelecionadotwo === 'idSap') {
$scope.pesquisarAtividade.idSap = pesquisaValuetwo;
} else if (tipoSelecionadotwo === 'numeroSerie') {
$scope.pesquisarAtividade.numeroSerie = pesquisaValuetwo;
}
};
function criarVariavelDePesquisatwo() {
$scope.pesquisarAtividade = {
idAtividade: undefined,
modelo: {
modelo: undefined,
codSap: undefined
},
nfChegada: undefined,
finalizado: undefined,
centro: undefined,
idSap: undefined,
numeroSerie: undefined
};
}
$scope.loader = false;
As duas funcoes estao criadas porem aqui nao cabe o cod inteiro e o controller tambem
Obrigado
Alguem me ajuda Obrigado
HTML
<div class="col s4 m4 l4">
<select ng-model="tipoSelecionado" ng-change="mudarPesquisa(tipoSelecionado, pesquisaValue)" material-select>
<option value="idAtividade">ID</option>
<option value="tipo">Origem</option>
<option value="centro">Centro</option>
<option value="modelo.modelo">Modelo</option>
<option value="modelo.codSap">Codigo SAP</option>
<option value="nfChegada">Nf Chegada</option>
<option value="finalizado">Situação</option>
<option value="idSap">ID do Sap</option>
<option value="numeroSerie">Numero de série</option>
</select>
</div>
<div class="col s8 m8 l8 posSearch">
<div class="col s12">
<input type="text" ng-model="pesquisaValue" placeholder="Pesquisar" ng-change="mudarPesquisa(tipoSelecionado,pesquisaValue)">
</div>
</div>
<div class="col s4 m4 l4">
<select ng-model="" ng-change="mudarPesquisatwo(tipoSelecionadotwo, pesquisaValuetwo)" material-select>
<option value="idAtividade">ID</option>
<option value="tipo">Origem</option>
<option value="centro">Centro</option>
<option value="modelo.modelo">Modelo</option>
<option value="modelo.codSap">Codigo SAP</option>
<option value="nfChegada">Nf Chegada</option>
<option value="finalizado">Situação</option>
<option value="idSap">ID do Sap</option>
<option value="numeroSerie">Numero de série</option>
</select>
</div>
<div class="col s8 m8 l8 posSearch">
<div class="col s12">
<input type="text" ng-model="pesquisaValuetwo" placeholder="Pesquisar" ng-change="mudarPesquisatwo(tipoSelecionadotwo,pesquisaValuetwo)">
</div>
</div>
<div class="white">
<table>
<thead>
<tr>
<td><strong>ID</strong><i class="fa fa-sort right mousePointerHover" ng-click="ordenarAtividade('idAtividade')"></i></td>
<td><strong>Origem</strong><i class="fa fa-sort right mousePointerHover" ng-click="ordenarAtividade('tipo')"></i></td>
<td><strong>Centro</strong><i class="fa fa-sort right mousePointerHover" ng-click="ordenarAtividade('centro')"></i></td>
<td><strong>Modelo</strong><i class="fa fa-sort right mousePointerHover" ng-click="ordenarAtividade('modelo.modelo')"></i></td>
<td><strong>Codigo SAP</strong><i class="fa fa-sort right mousePointerHover" ng-click="ordenarAtividade('modelo.codSap')"></i></td>
<td><strong>NF Chegada</strong><i class="fa fa-sort right mousePointerHover" ng-click="ordenarAtividade('nfChegada')"></i></td>
<td><strong>Situação</strong><i class="fa fa-sort right mousePointerHover" ng-click="ordenarAtividade('finalizado')"></i></td>
<td><strong>ID do SAP</strong><i class="fa fa-sort right mousePointerHover" ng-click="ordenarAtividade('chegada')"></i></td>
<td><strong>Serie</strong><i class="fa fa-sort right mousePointerHover" ng-click="ordenarAtividade('chegada')"></i></td>
</tr>
</thead>
<tbody>
<tr ng-click="showAtividade($index, atividade)" ng-class="{'blue': estaNaLista(atividade)}" ng-repeat="atividade in filtered = (atividades| filter:pesquisarAtividade | orderBy:ordenacaoAtividade) | paginate: paginacao.paginaAtual: paginacao.numeroPorPaginas">
<td>{{atividade.idAtividade}}</td>
<td>{{atividade.tipo}}</td>
<td>{{atividade.centro}}</td>
<td>{{atividade.modelo.modelo}}</td>
<td>{{atividade.modelo.codSap}}</td>
<td>{{atividade.nfChegada}}</td>
<td>{{atividade.finalizado}}</td>
<td>{{atividade.idSap}}</td>
<td>{{atividade.numeroSerie}}</td>
</tr>
</tbody>
</table>
JS
$scope.ordenarAtividade = function(ordenar) {
if ($scope.ordenacaoAtividade === undefined || $scope.ordenacaoAtividade.indexOf("-") != -1) {
$scope.ordenacaoAtividade = ordenar;
} else {
$scope.ordenacaoAtividade = "-" + ordenar;
}
};
$scope.mudarPesquisatwo = function(tipoSelecionadotwo, pesquisaValuetwo) {
$scope.atividadesSelecionadas = [];
$scope.visualizar = false;
criarVariavelDePesquisatwo();
if (tipoSelecionadotwo === 'idAtividade') {
$scope.pesquisarAtividade.idAtividade = pesquisaValuetwo;
} else if (tipoSelecionadotwo === 'tipo') {
$scope.pesquisarAtividade.tipo = pesquisaValuetwo;
} else if (tipoSelecionadotwo === 'modelo.modelo') {
$scope.pesquisarAtividade.modelo.modelo = pesquisaValuetwo;
} else if (tipoSelecionadotwo === 'modelo.codSap') {
$scope.pesquisarAtividade.modelo.codSap = pesquisaValuetwo;
} else if (tipoSelecionadotwo === 'nfChegada') {
$scope.pesquisarAtividade.nfChegada = pesquisaValuetwo;
} else if (tipoSelecionadotwo === 'centro') {
$scope.pesquisarAtividade.centro = pesquisaValuetwo;
} else if (tipoSelecionadotwo === 'finalizado') {
$scope.pesquisarAtividade.finalizado = pesquisaValuetwo;
} else if (tipoSelecionadotwo === 'idSap') {
$scope.pesquisarAtividade.idSap = pesquisaValuetwo;
} else if (tipoSelecionadotwo === 'numeroSerie') {
$scope.pesquisarAtividade.numeroSerie = pesquisaValuetwo;
}
};
function criarVariavelDePesquisatwo() {
$scope.pesquisarAtividade = {
idAtividade: undefined,
modelo: {
modelo: undefined,
codSap: undefined
},
nfChegada: undefined,
finalizado: undefined,
centro: undefined,
idSap: undefined,
numeroSerie: undefined
};
}
$scope.loader = false;
As duas funcoes estao criadas porem aqui nao cabe o cod inteiro e o controller tambem
Obrigado
Felipe
Curtidas 0
Respostas
Diego Silveira
12/09/2018
Vi que não obteve resposta ainda... Estou com praticamente a mesma dúvida apenas algumas opções diferente e forma de filtrar, estou usando DataTables e cada coluna possui um filtro no topo. Quando preencho um ele filtra a coluna, quando preencho outro ele perde o primeiro filtro e exibe o resultado do segundo filtro... Pesquisei muito aqui e não encontrei solução e o seu caso é o que mais se aproxima do meu problema... Não sei se posso colocar link para uma imagem aqui no forum...
GOSTEI 0