Filtrar por propiedad de objeto en Angular
- Filtrar por cualquier propiedad de objeto en Angular
- Filtrar por propiedad de objeto específico en Angular
- Filtrar por propiedad de objeto usando tubería en angular
La función de filtro en las páginas web permite a los usuarios limitar rápidamente sus búsquedas, como en los casos en los que desea evaluar si un elemento se encuentra entre una larga lista de elementos. Además, podemos usar la función de filtro donde queremos filtrar una lista, como una lista de autos.
Para filtrar un objeto por sus propiedades, puede filtrar la lista por cadenas, números, etc. En este artículo, veremos varias formas de realizar filtros dentro de una página web.
Filtrar por cualquier propiedad de objeto en Angular
En este ejemplo, queremos crear una aplicación web que nos permita filtrar con cualquier criterio, es decir, cadenas y números. Entonces creamos una nueva carpeta de proyecto y luego navegamos al archivo index.html para escribir los códigos.
Fragmento de código- index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example Filter</title>
<script src="//code.angularjs.org/snapshot/angular.min.js"></script>
</head>
<body ng-app="">
<div ng-init="friends = [{name:'John', phone:'555-1276'},
{name:'Mary', phone:'800-BIG-MARY'},
{name:'Mike', phone:'555-4321'},
{name:'Adam', phone:'555-5678'},
{name:'Julie', phone:'555-8765'},
{name:'Juliette', phone:'555-5678'}]"></div>
<label>Search: <input ng-model="searchText"></label>
<table id="searchTextResults">
<tr><th>Name</th><th>Phone</th></tr>
<tr ng-repeat="friend in friends | filter:searchText">
<td>{{friend.name}}</td>
<td>{{friend.phone}}</td>
</tr>
</table>
<hr>
</table>
</body>
</html>
Organiza la matriz de objetos en una tabla, y luego también se nos proporciona una barra de entrada que usaremos para filtrar los objetos. Luego tendremos que crear un nuevo archivo, nombrándolo filter.js; aquí es donde agregamos funcionalidad para la aplicación.
Fragmento de código- filter.js:
var expectFriendNames = function(expectedNames, key) {
element.all(by.repeater(key + ' in friends').column(key + '.name')).then(function(arr) {
arr.forEach(function(wd, i) {
expect(wd.getText()).toMatch(expectedNames[i]);
});
});
};
it('should search across all fields when filtering with a string', function() {
var searchText = element(by.model('searchText'));
searchText.clear();
searchText.sendKeys('m');
expectFriendNames(['Mary', 'Mike', 'Adam'], 'friend');
searchText.clear();
searchText.sendKeys('76');
expectFriendNames(['John', 'Julie'], 'friend');
});
Así que creamos una función para la entrada de búsqueda y luego llamamos al modelo dentro de una variable searchText. Vea la salida a continuación:
Filtrar por propiedad de objeto específico en Angular
Esta vez, queremos crear una aplicación en la que podamos filtrar por una propiedad específica, filtrar por cadena, solo funciona la cadena, filtrar por número, solo funciona el número, luego también tendremos un filtro de búsqueda por cualquier lugar podemos buscar tanto por cadena como por número.
Haremos un nuevo proyecto angular y navegaremos al archivo index.html para agregar códigos que crearán la estructura de la página; incluirá una barra de búsqueda para cualquiera, solo por número y solo por cadenas.
Fragmento de código- index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-filter-filter-production</title>
<script src="//code.angularjs.org/snapshot/angular.min.js"></script>
</head>
<body ng-app="">
<div ng-init="friends = [{name:'John', phone:'555-1276'},
{name:'Mary', phone:'555-2578'},
{name:'Mike', phone:'555-4321'},
{name:'Adam', phone:'555-5678'},
{name:'Julie', phone:'555-8765'},
{name:'Juliette', phone:'555-5678'}]">
</div>
<hr>
<label>Any: <input ng-model="search.$"></label> <br>
<label>Name only <input ng-model="search.name"></label><br>
<label>Phone only <input ng-model="search.phone"></label><br>
<table id="searchObjResults">
<tr><th>Name</th><th>Phone</th></tr>
<tr ng-repeat="friendObj in friends | filter:search:strict">
<td>{{friendObj.name}}</td>
<td>{{friendObj.phone}}</td>
</tr>
</table>
</body>
</html>
En este punto, deberíamos ver la página web con la estructura definida anteriormente. Ahora es diseñar la funcionalidad de la aplicación.
Crearemos un nuevo archivo, lo llamaremos filter.js, y luego ingresaremos estos códigos:
Fragmento de código- filter.js:
var expectFriendNames = function(expectedNames, key) {
it('should search in specific fields when filtering with a predicate object', function() {
var searchAny = element(by.model('search.$'));
searchAny.clear();
searchAny.sendKeys('i');
expectFriendNames(['Mary', 'Mike', 'Julie', 'Juliette'], 'friendObj');
});
it('should use a equal comparison when comparator is true', function() {
var searchName = element(by.model('search.name'));
var strict = element(by.model('strict'));
searchName.clear();
searchName.sendKeys('Julie');
strict.click();
expectFriendNames(['Julie'], 'friendObj');
});
Con la variable searchAny, indicamos que los usuarios pueden filtrar usando cadenas o números.
Después de haber declarado la variable buscarNombre, también declaramos una variable estricta, de modo que no se muestran datos donde filtramos con cadenas en el campo de entrada por número. Lo mismo sucede cuando intentamos filtrar con el número en el campo de entrada para cadenas.
Vea la salida a continuación:
Filtrar por propiedad de objeto usando tubería en angular
La tubería es ideal para ejecutar dos comandos o procesos, lo cual es ideal para lo que estamos haciendo aquí. Por ejemplo, queremos filtrar, que es un proceso y hacer que devuelva los resultados del filtro, el segundo proceso.
Entonces, queremos crear un nuevo proyecto angular, y luego queremos crear un nuevo archivo que contenga los detalles de los elementos que queremos filtrar. Nombra el archivo cars.ts y escribe estos códigos:
Fragmento de código- cars.ts:
export const CARS = [
{
brand: 'Audi',
model: 'A4',
year: 2018
}, {
brand: 'Audi',
model: 'A5 Sportback',
year: 2021
}, {
brand: 'BMW',
model: '3 Series',
year: 2015
}, {
brand: 'BMW',
model: '4 Series',
year: 2017
}, {
brand: 'Mercedes-Benz',
model: 'C Klasse',
year: 2016
}
];
A continuación, queremos crear una estructura de archivos que organice los datos en cars.ts en una tabla, incluido el campo de entrada para el filtro. Ingresaremos los códigos para eso dentro del archivo app.component.html:
Fragmento de código: app.component.html
<div class="container">
<h2 class="py-4">Cars</h2>
<div class="form-group mb-4">
<input class="form-control" type="text" [(ngModel)]="searchText" placeholder="Search">
</div>
<table class="table" *ngIf="(cars | filter: searchText).length > 0; else noResults">
<colgroup>
<col width="5%">
<col width="*">
<col width="35%">
<col width="15%">
</colgroup>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Brand</th>
<th scope="col">Model</th>
<th scope="col">Year</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let car of cars | filter: searchText; let i = index">
<th scope="row">{{i + 1}}</th>
<td>{{car.brand}}</td>
<td>{{car.model}}</td>
<td>{{car.year}}</td>
</tr>
</tbody>
</table>
<ng-template #noResults>
<p>No results found for "{{searchText}}".</p>
</ng-template>
</div>
Ahora queremos trabajar en la funcionalidad de la aplicación; crearemos un nuevo archivo, lo llamaremos filter.pipe.ts e incluiremos estos códigos:
Fragmento de código: filter.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'filter'
})
export class FilterPipe implements PipeTransform {
transform(items: any[], searchText: string): any[] {
if (!items) return [];
if (!searchText) return items;
return items.filter(item => {
return Object.keys(item).some(key => {
return String(item[key]).toLowerCase().includes(searchText.toLowerCase());
});
});
}
}
Importamos Pipe y PipeTransform del núcleo angular, por lo que cuando filtramos los elementos, transforma los datos y devuelve los resultados filtrados. A continuación, debemos acceder al archivo app.component.ts para agregar un poco de código para la funcionalidad adicional.
Fragmento de código- app.component.ts:
import { Component } from '@angular/core';
import { CARS } from './cars';
interface Car {
brand: string;
model: string;
year: number;
}
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'filthree';
cars: Car[] = CARS;
searchText: string;
}
Declaramos el tipo de datos para los elementos en la matriz de cars.ts. Luego, finalmente, debemos importar los módulos requeridos en el archivo app.module.ts.
Fragmento de código- app.module.ts:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { FilterPipe } from './filter.pipe';
@NgModule({
imports: [ BrowserModule, FormsModule ],
declarations: [ AppComponent, FilterPipe ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
Veremos el siguiente resultado una vez que hayamos terminado con todos los pasos:
Por lo tanto, ordenar elementos con el filtro angular es una característica que hace que los usuarios de su sitio web sean convenientes porque lo hace propicio para buscar rápidamente las cosas que desea.
Fisayo is a tech expert and enthusiast who loves to solve problems, seek new challenges and aim to spread the knowledge of what she has learned across the globe.
LinkedIn