Disable Filter Case Sensitive in Angular

Question

Guys I have a field on the page that serves to filter a table, but the filter is differentiating capital letters from minuscule letters, and I wish that didn’t happen, follow the code:

<tr ng-repeat="participante in listaCadParticipante | filter : filtro">

<input type="text" class="form-control" placeholder="Digite aqui o texto para filtrar" ng-model="filtro" style="height:50px; />

I saw somewhere else to try to put filter : filtro : false but it didn’t work, if anyone can help me I appreciate

Answer 1

Just use :false after filtro, the very documentation says so. Actually, all you have to do is put false if you want to explain this, because it already the standard.

Anyway, you can create a function to do the filter work and make sure it does the comparisons case-insensitive (see the second example).

angular.module('app', []).controller('mainController', function($scope) {
  $scope.listaCadParticipante = [{ nome: 'Jeferson' }, { nome: 'Joaquim' }];
  
  $scope.filtroCs = function(item, index, array) {
    if($scope.filtro2 == undefined)
      return true;
    
    return item.nome.toLowerCase().indexOf($scope.filtro2.toLowerCase()) !== -1;
  };
});

table, th, td {
   border: 1px solid gray;
   margin: 10px;
}

input {
  margin: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="mainController">

  <input ng-model="filtro" type="text" />
  
  <table>
    <thead>
    </thead>
    <tbody>
      <tr ng-repeat="participante in listaCadParticipante | filter:filtro:false">
        <td> {{ participante.nome }} </td>
      </tr>
    </tbody>
  </table>
  
  <h4>Exemplo usando uma função: </h4>
  
  <input ng-model="filtro2" type="text" />
  
  <table>
    <thead>
    </thead>
    <tbody>
      <tr ng-repeat="participante in listaCadParticipante | filter:filtroCs">
        <td> {{ participante.nome }} </td>
      </tr>
    </tbody>
  </table>

</div>