2

Pessoal possuo uma tabela em que é possível filtrar seus dados utilizando filter, onde passo as informações do filter através de um input:

<tr ng-dblclick="openUpdateCadProduto(produto)" ng-doubleclick ng-repeat="produto in listaCadProduto  | limitTo:barLimit | filter:{codigo: filtro}">
                    <td>{{produto.codigo}}</td>
                    <td>{{produto.descricao}}</td>
                    <td>{{produto.preco}}</td>
                    <td>{{produto.tabUnidadeMedidaEntity.sigla}}</td>
                    <td>{{produto.codigoBarras}}</td>
                </tr>

porém só estou filtrando pelo código, gostaria de saber como faço para filtrar também pela descrição, pelo preço e pela sigla

1 Resposta 1

3

O $filter aceita uma expressão como parâmetros além de um object, portanto você pode filtrar da seguinte forma:

$filter('filter')(array, 'ABC');

Ou no HTML:

ng-repeat="produto in listaCadProduto  | limitTo:barLimit | filter: filtro"

Um exemplo prático no HTML:

angular
  .module('appFiltro', []);

angular
  .module('appFiltro')
  .controller('FiltroController', FiltroController);

FiltroController.$inject = [];

function FiltroController() {
  var filtro = this;
  
  _iniciar();
  
  function _iniciar() {
    filtro.produtos = [];
    
    filtro.produtos.push({codigo: 1, descricao: 'banana', preco: 2.00});
    filtro.produtos.push({codigo: 2, descricao: 'maçã', preco: 4.00});
    filtro.produtos.push({codigo: 3, descricao: 'tomate', preco: 10.00});
  }
}
table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

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

tr:nth-child(even) {
    background-color: #dddddd;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-i18n/1.6.5/angular-locale_pt-br.js"></script>

<div ng-app="appFiltro">
  <div ng-controller="FiltroController as filtro">
    <input type="text" ng-model="filtro.busca"/>
    <br>
    <br>
    <table>
      <tbody>
        <tr ng-repeat="produto in filtro.produtos | filter: filtro.busca">
          <td>{{produto.codigo}}</td>
          <td>{{produto.descricao}}</td>
          <td>{{produto.preco}}</td>
          <td>{{produto.preco | currency:"R$ "}}<td>
        </tr>
      </tbody>
    </table>
  </div>
</div>


filter

Selects a subset of items from array and returns it as a new array.

Em tradução livre:

Seleciona um subgrupo de itens do array e retorna o resultado em um novo array.

5
  • No caso então, no Html eu não conseguiria utilizar apenas um campo de filtro para filtrar diferentes campos da tabela? Eu já teria que fazer este filtro no próprio controller do angular?
    – Brayan
    11/08/2017 às 13:32
  • @Brayan coloquei um exemplo prático baseado levemente na sua pergunta
    – Sorack
    11/08/2017 às 13:44
  • Muito obrigado, solucionou todas as minhas duvidas :D
    – Brayan
    11/08/2017 às 13:46
  • @Brayan quer que coloque um exemplo no controller?
    – Sorack
    11/08/2017 às 13:46
  • 1
    Acho que assim já esta ótimo, obrigado :D
    – Brayan
    11/08/2017 às 14:00

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 .