AngularJS Filter multiple table fields

Question

AngularJS Filter multiple table fields

Navigation

#1 by (2 votes)

2

Personal I have a table where you can filter your data using filter, where I pass the filter information through an 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>

But I'm just filtering through the code, I'd like to know how to filter by description, price, and acronym as well

javascript angularjs

asked by anonymous 11.08.2017 / 15:18

1 answer

How to change html data-start-height by Media Queries? What is a balanced tree and what are the advantages of using it?

score 2 · Accepted Answer

$filter accepts an expression as parameters in addition to object , so you can filter as follows:

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

Or no HTML :

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

A working example in 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><scriptsrc="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

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

Free translation:

Selects a subgroup of items from array and returns the result in a new array .