Skip to content

Instantly share code, notes, and snippets.

@EderRoger
Last active August 29, 2015 14:08
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save EderRoger/8d78bcf94de4e2de7d2d to your computer and use it in GitHub Desktop.
Save EderRoger/8d78bcf94de4e2de7d2d to your computer and use it in GitHub Desktop.
AngularJS filter with many fields
define(['angular'], function (angular) {
'use strict';
/* Filters */
angular.module('app.filters', [])
.filter('filterMultiple', ['$filter', function ($filter) {
return function (items, keyObj) {
var notFound = true;
var filterObj = {
data: items,
filteredData: [],
applyFilter: function (obj, key) {
var fData = [];
if (this.filteredData && this.filteredData.length == 0)
this.filteredData = this.data;
if (obj) {
var fObj = {};
if (angular.isString(obj)) {
fObj[key] = obj;
fData = fData.concat($filter('filter')(this.filteredData, fObj));
}
if (fData.length > 0) {
this.filteredData = fData;
notFound = false;
}
}else{
notFound = false;
}
}
};
if (keyObj) {
angular.forEach(keyObj, function (obj, key) {
filterObj.applyFilter(obj, key);
});
}
return (notFound) ? [] : filterObj.filteredData;
}
}]);
;
});
<div class="form-horizontal">
<div class="form-group">
<div class="col-lg-4 has-feedback">
<input type="text" class="form-control" ng-model="pesquisa" placeholder="Filtro" focus />
<span class="glyphicon glyphicon-search form-control-feedback"></span>
</div>
</div>
</div>
<div class="table-responsive">
<table class="table table-condensed">
<thead>
<tr>
<th width="2%">#</th>
<th width="49%">Nome</th>
<th width="49%">Login</th>
<th width="30%">Situação</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="usuario in usuarios | filterMultiple: {nome:pesquisa , login:pesquisa , statusFormatado:pesquisa} | orderBy: 'nome'">
<td>
<a href="#{{currentPath}}/{{usuario.id}}" class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-pencil"></span>
</a>
</td>
<td>{{ usuario.nome | uppercase }}</td>
<td>{{ usuario.login | lowercase }}</td>
<td>{{ usuario.statusFormatado | lowercase }}</td>
</tr>
<tr ng-show="(usuarios | filterMultiple: {nome:pesquisa , login:pesquisa , statusFormatado:pesquisa}).length == 0">
<td colspan="4">
<span>Nenhum registro encontrado!</span>
</td>
</tr>
</tbody>
</table>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment