¿Cómo crear filtros personalizados en AngularJS?

¿Alguna vez ha usado filtros con la directiva ng-repeat como se muestra en la lista a continuación?

<div ng-controller="ProductController">
     <table class="table">              
         <tr ng-repeat="a in products|filter:searchTerm">
             <td>{{a.name}}</td>
             <td>{{a.price}}</td>
         </tr>
     </table>
</div>

Si es así, entonces has utilizado un filtro en una aplicación AngularJS. AngularJS nos proporciona muchas directivas incorporadas como la búsqueda. Si es necesario, AngularJS también nos permite crear filtros personalizados, que exploraremos en esta publicación.

AngularJS nos da una API sencilla para crear un filtro personalizado. Recordarás que usamos app.controller() para crear controladores y app.module() para crear módulos. Exactamente de la misma manera, AngularJS nos ha dado la API angular.filter para crear un filtro personalizado en AngularJS.

Se puede crear un filtro personalizado con la siguiente sintaxis:

Para crear un filtro personalizado, debe seguir los siguientes pasos:

• Cree un filtro usando app.filter pasando un nombre de filtro personalizado y una función como parámetros de entrada a app.filter()
• App.filter() will return a function
• La función devuelta puede tomar varios parámetros de entrada opcionales
• La función devuelta tendrá un código de filtro personalizado y devolverá la salida.

Comencemos con la creación de un filtro personalizado muy simple. Podemos aplicar este filtro personalizado en una cadena y devolverá la cadena con cada carácter en mayúsculas.

MyApp.filter('toUpperCase', function () {
    return function (input)
    {
        var output = "";       
        output = input.toUpperCase();
        return output;
    }
})

Podemos usar el filtro personalizado toUpperCase en la vista como se muestra en la lista a continuación:

<div ng-controller="ProductController">
     <table class="table">              
         <tr ng-repeat="a in products|filter:searchTerm">
             <td>{{a.name|toUpperCase}}</td>
             <td>{{a.price}}</td>
         </tr>
     </table>
</div>

Debemos tener en cuenta que el nombre del filtro personalizado distingue entre mayúsculas y minúsculas. La vista creada anteriormente está leyendo datos del controlador como se muestra en la lista a continuación:

MyApp.controller("ProductController", function ($scope) {
    $scope.products = [
		{ 'name': 'pen', 'price': '200' },

		{ 'name': 'pencil', 'price': '400' },

		{ 'name': 'book', 'price': '2400' },

		{ 'name': 'ball', 'price': '400' },

		{ 'name': 'eraser', 'price': '1200' },
    ];
})

Ahora obtendremos el nombre del producto representado en mayúsculas en la vista como se muestra en la imagen a continuación:

MyApp.filter('toPositionUpperCase', function () {
 
    return function (input,position)
    {
        var output = [];       
        var capLetter = input.charAt(position).toUpperCase();
        for (var i = 0; i < input.length; i++) {
 
            if (i == position) {
                output.push(capLetter);
            } else {
                output.push(input[i]);
            }
 
        }
        output = output.join('');
        return output;
    }
})

Podemos usar el filtro personalizado toPositionUpperCase en la vista como se muestra en la lista a continuación. Como notará, estamos pasando el parámetro de entrada al filtro personalizado usando los dos puntos.

<div ng-controller="ProductController">
    <table class="table">              
        <tr ng-repeat="a in products|filter:searchTerm">
             <td>{{a.name|toPositionUpperCase:1}}</td>
            <td>{{a.price}}</td>
        </tr>
    </table>
</div>

Obtendremos la segunda letra del nombre del producto en mayúsculas en la vista como se muestra en la imagen a continuación:

Antes de concluir este artículo, vamos a crear un filtro personalizado que se aplicará a la colección de artículos. Digamos que de la lista de productos, queremos filtrar todos los productos mayores que un precio determinado. Podemos escribir este filtro personalizado como se muestra en el listado a continuación:

MyApp.filter('priceGreaterThan', function () {
 
    return function (input, price) {
        var output = [];
        if (isNaN(price)) {
 
            output = input;
        }
        else {
            angular.forEach(input, function (item) {
 
                if (item.price > price) {
                    output.push(item)
                }
            });
        }
        return output;
    }
})

Podemos usar el filtro personalizado en la vista como se muestra en la lista a continuación. Estamos pasando el parámetro price desde el cuadro de texto del tipo de entrada.

<h1>With Custom Filter</h1>
       
<div ng-controller="ProductController">
   <input type="number" class="form-control" placeholder="Search here" ng-model="priceterm" />
   <br/>
   <table class="table">
       <tr ng-repeat="b in products|priceGreaterThan:priceterm">
           <td>{{b.name}}</td>
           <td>{{b.price}}</td>
       </tr>
   </table>
</div>

Con esto obtendremos una matriz filtrada en la vista como se muestra en la imagen a continuación:

Así que ahí lo tienes: ¡así es como se crea un filtro personalizado! Es fácil: no son más que funciones que requieren una entrada y parámetros opcionales para devolver una función. ¡Espero que hayas disfrutado de la lectura!

Entregue aplicaciones web modernas y receptivas sin límites en navegadores, dispositivos y plataformas con Infragistics controles jQuery y HTML5. ¡Descargue la prueba gratuita ahora y vea su poder en acción!