Hay algunos filtros que se agregan en AngularJS para facilitar el formateo y el trabajo con datos. Hay varios filtros incorporados en AngularJS. Se enumeran aquí junto con algunos ejemplos para facilitar la comprensión.
Sintaxis básica:
los filtros generalmente se agregan a las expresiones usando el carácter de barra vertical (|).
Por ejemplo, el filtro {{ fullName | uppercase }} formatea el nombre completo en formato de mayúsculas.
Algunos de los filtros preconstruidos en AngularJS son:
- moneda El número tiene el formato de moneda.
- fecha La fecha se especifica en un formato específico.
- filtro La array se filtra en función de los criterios proporcionados.
- limitTo La array o una string está limitada a un número específico de elementos/caracteres.
- número Un número si tiene el formato de una string.
- orderBy La array está ordenada por una expresión.
- minúsculas Este filtro convierte una string en letras minúsculas.
- mayúsculas Este filtro convierte una string en letras mayúsculas.
- json Convierte un objeto JavaScript en una string JSON.
- Filtro de moneda:
este filtro simplemente formatea un número como moneda.<!DOCTYPE html><html><scriptsrc=</script><body><divng-app="myApp"ng-controller="costCtrl"><h1>Currency Format - GeeksforGeeks</h1><h2>Price: {{ price | currency }}</h2></div><script>var app = angular.module('myApp', []);app.controller('costCtrl', function($scope) {$scope.price = 20;});</script></body></html>Producción:
Aquí, el signo de dólar ($) se ha añadido automáticamente delante del valor numérico.
- Filtro de fecha:
el filtro de fecha formatea una fecha en un formato específico.Sintaxis:
{{ date | date : format : timezone }}<!DOCTYPE html><html><scriptsrc=</script><body><divng-app="myApp"ng-controller="datCtrl"><h1>GeeksforGeeks - Date Filter</h1><p>Date = {{ today | date }}</p></div><script>var app = angular.module('myApp', []);app.controller('datCtrl', function($scope) {$scope.today = new Date();});</script></body></html>Producción:
Aquí, se ha utilizado la función date() y que muestra la fecha actual.
- Filtro:
Esto se usa para mostrar solo los objetos requeridos. El filtro selecciona un subconjunto de una array.
Por ejemplo, este filtro solo se puede usar en arrays, ya que devuelve una array que contiene solo los elementos coincidentes (condición dada en la array).<!DOCTYPE html><html><scriptsrc=</script><body><divng-app="myApp"ng-controller="namesCtrl"><h1>filter - GeeksforGeeks</h1><ul><ling-repeat="x in names | filter : 'e'">{{ x }}</li></ul></div><script>angular.module('myApp', []).controller('namesCtrl',function($scope) {$scope.names = ['Jani','Carl','Margareth','Hege','Joe','Gustav','Birgit','Mary','Kai'];});</script><p>This example displays only the namescontaining the letter "e".</p></body></html>Producción:
- limitTo Filter:
este filtro devuelve una array o una string que contiene solo un número específico de elementos. La salida dependerá del tipo de entrada que se le dé al programa. Cuando se usa para arrays, devuelve una array que contiene solo el número especificado de elementos.
En el caso de la string, devuelve una string que contiene solo el número de caracteres especificado, mientras que cuando se usa para números, devuelve una string que contiene solo el número de dígitos especificado.Sintaxis:
{{ object | limitTo : limit : begin }}Aquí, limit especifica el número de elementos que se mostrarán, mientras que begin especifica desde dónde comienza la limitación.
<!DOCTYPE html><html><scriptsrc=</script><body><divng-app="myApp"ng-controller="sizeCtrl"><h1>limitTo - GeeksforGeeks</h1><ul><ling-repeat="x in cars | limitTo : 4 : 1">{{x}}</li></ul></div><script>var app = angular.module('myApp', []);app.controller('sizeCtrl', function($scope) {$scope.cars = ["Audi","BMW","Dodge","Fiat","Ford","Volvo","Lamborghini"];});</script><p>Filter applied from firstelement to the fifth element.</p></body></html>Producción:
- orderBy Filter:
Esto se usa para ordenar una array. Las strings (por defecto en orden alfabético) y los números (por defecto en orden ascendente) se pueden ordenar usando este filtro.Sintaxis:
{{ array | orderBy : expression : reverse }}Aquí, se puede usar el reverso para invertir el orden de la array resultante.
<!DOCTYPE html><html><scriptsrc=</script><body><divng-app="myApp"ng-controller="orderCtrl"><h1>orderBy - GeeksforGeeks</h1><ul><ling-repeat="x in customers | orderBy : 'city'">{{x.name + ", " + x.city}}</li></ul></div><script>var app = angular.module('myApp', []);app.controller('orderCtrl', function($scope) {$scope.customers = [{"name": "Delhi"}, {"name": "Mumbai"}, {"name": "Patna"}, {"name": "Kolkata"}, {"name": "Pune"}, {"name": "Ranchi"}, {"name": "Bhopal"}];});</script><p>Sorting in ascending order.</p></body></html>Producción:
- número Filtro:
Probablemente el filtro más simple. Simplemente formatea un número en una string.Sintaxis:
{{ string | number : fractionsize}}Aquí, ‘fractionsize’ especifica el número de decimales.
<!DOCTYPE html><html><scriptsrc=</script><body><divng-app="myApp"ng-controller="nCtrl"><h1>number Filter - GeeksforGeeks</h1><h2>Rs.{{money | number : 3}}</h2></div><script>var app = angular.module('myApp', []);app.controller('nCtrl', function($scope) {$scope.money = 999999;});</script><p>The money is written with three decimals.</p></body></html>Producción:
- Filtro de minúsculas:
este filtro simplemente convierte una string en letras minúsculas.Sintaxis:
{{ string | lowercase }}Echemos un vistazo a un ejemplo para aclarar este filtro.
<!DOCTYPE html><html><scriptsrc=</script><body><h2>AngularJS - lowercase</h2><br><br><divng-app="myApp"ng-controller="myCtrl"><strong>Input:</strong><br><inputtype="text"ng-model="string"><br><br><strong>Output:</strong><br> {{string|lowercase}}</div><script>var app = angular.module('myApp', []);app.controller('myCtrl', function($scope) {$scope.string = "";});</script></body></html>El código mencionado anteriormente le pide al usuario una entrada. Después de que el usuario ingresa un término en el cuadro de entrada, se almacena en ng-model=”string” . Ahora, AngularJS resolverá la expresión y devolverá el resultado exactamente donde está escrita la expresión. Las expresiones de AngularJS se pueden escribir entre llaves dobles, así: {{ expression }} .
Producción:
Aquí, en este código, la salida {{string}} se muestra justo debajo del cuadro de entrada. Sin embargo, para cambiar la string de entrada a minúsculas, se debe agregar ‘|minúsculas’ al nombre de la expresión.
Por lo tanto, {{string|lowercase}} devolverá la string de entrada en formato de minúsculas.
- Filtro de mayúsculas:
el filtro de mayúsculas en AngularJS se usa para cambiar una string a una string o letras mayúsculas.Sintaxis:
{{ string | uppercase}}<!DOCTYPE html><html><scriptsrc=</script><body><divng-app="myApp"ng-controller="caseCtrl"><h1>{{txt | uppercase}}</h1></div><script>var app = angular.module('myApp', []);app.controller('caseCtrl', function($scope) {$scope.txt = "GeeksforGeeks!";});</script><p>The text is written in uppercase letters.</p></body></html>Producción:
- Filtro json:
este filtro simplemente convierte un objeto JavaScript en una string JSON, y esto es muy útil durante la depuración de aplicaciones.Sintaxis:
{{ object | json : spacing }}Aquí, el espaciado especifica el número de espacios a utilizar por sangría. El valor predeterminado es 2, sin embargo, este valor es opcional.
Echa un vistazo a este código de ejemplo:
<!DOCTYPE html><html><scriptsrc=</script><body><divng-app="myApp"ng-controller="jsCtrl"><h1>GeeksforGeeks</h1><pre>{{customer | json : 20}}</pre></div><script>var app = angular.module('myApp', []);app.controller('jsCtrl', function($scope) {$scope.customer = {"name" : "Milk","city" : "Patna","country" : "India"};});</script><p>A JSON string with 20 spaces per indentation.</p></body></html>Producción:
- Echemos un vistazo al ejemplo de un filtro de array.
<!DOCTYPE html><html><body><h1>GeeksforGeeks</h1><p>Click the button to get every elementin the array that has a value of 38 or more.</p><buttononclick="myFunction()">Try it</button><pid="demo"></p><script>var num = [23, 32, 56, 30, 56, 45, 34, 39];function checkNum(num) {return num >= 38;}function myFunction() {document.getElementById("demo").innerHTML = num.filter(checkNum);}</script></body></html>Al hacer clic en el botón ‘Pruébelo’ , todos los elementos de la array que tienen un valor de 38 o más se imprimen en la pantalla.
Publicación traducida automáticamente
Artículo escrito por sanchit496 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA