Angularjs Filter various table fields

Asked

Viewed 1,238 times

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>

however I am only filtering by code, I would like to know how I do to filter also by description, by price and acronym

1 answer

3


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

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

Or in the HTML:

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

A practical 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>
<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.

In free translation:

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

  • In that case, in Html I couldn’t use just one filter field to filter different fields in the table? I would already have to make this filter in the angular controller itself?

  • @Brayan I put a practical example based slightly on your question

  • Thank you very much, solved all my doubts :D

  • @Brayan wants you to set an example on controller?

  • 1

    I think that’s great, thank you :D

Browser other questions tagged

You are not signed in. Login or sign up in order to post.