Los filtros se utilizan para dar formato al valor de una expresión y mostrarlo al usuario. Se puede utilizar en vistas previas de HTML, controladores o servicios y directivas. AngularJS tiene muchos filtros incorporados, pero podemos definir fácilmente nuestro propio filtro.
Filtros incorporados:
- Filtro de filtro AngularJS:
- Filtro de moneda AngularJS:
- Filtro de número de AngularJS:
- Filtro de fecha AngularJS:
- AngularJS json Filtro:
- Filtro en minúsculas de AngularJS
- Filtro de mayúsculas AngularJS:
- AngularJS limitTo Filter
- Orden de AngularJSPor filtro
Si se inyecta una moneda de filtro mediante el uso de la dependencia currencyFilter . El argumento inyectado es una función que toma el valor a formatear como el primer argumento y filtra los parámetros comenzando con el segundo argumento. Las siguientes formas se utilizan para implementar el filtro.
Enfoque 1: uso de filtros en plantillas de vista
Sintaxis:
- Al aplicar los filtros a las expresiones en las plantillas de vista:
{{ expression | filter }}
- Los filtros se pueden aplicar al resultado de otro filtro. Se llama “enstringmiento”:
{{ expression | filter1 | filter2 | ... }}
- Los filtros pueden tener argumentos:
{{ expression | filter:argument1:argument2:... }}
Programa:
<!DOCTYPE html> <html> <head> <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> </script> </head> <body> <div ng-app="app1" ng-controller="currencyCtrl"> <h1>Price: {{ price | currency }}</h1> </div> <script> var app = angular.module('app1', []); app.controller('currencyCtrl', function($scope) { $scope.price = 100; }); </script> <p> The currency filter formats a number to a currency format. </p> </body> </html>
Producción:
Enfoque 2: el filtro se usa en directivas, servicios y controladores. Para lograr esto, inyecte una dependencia con el nombre de filtro en su directiva/controlador/servicio .
Programa:
<script> var listedItems = [ { itemID: 001, itemName: "Laptop", stockLeft: 1 }, { itemID: 002, itemName: "Cell Phone", stockLeft: 3 }, { itemID: 003, itemName: "Earphones", stockLeft: 0 }, { itemID: 004, itemName: "Chargers", stockLeft: 5 }, { itemID: 005, itemName: "Headphones", stockLeft: 0 }, { itemID: 006, itemName: "USB Cables", stockLeft: 15} ]; listedItems = listedItems.filter(function (item) { return (item.stockLeft > 0); }); // This will display the no of items are in stock prompt("", "There are " + listedItems.length + " items left in shop."); </script>
Producción:
Enfoque 3: Es la modificación del segundo enfoque. Los filtros también se pueden agregar a AngularJS para formatear valores de datos. Hay un servicio de filtro de $ que se usa en nuestro controlador AngularJS. En AngularJS, también puede inyectar el servicio $filter dentro del controlador y puede usarlo con la siguiente sintaxis para el filtro.
Sintaxis:
-
$filter("filter")(array, expression, compare, propertyKey) function myCtrl($scope, $filter) { $scope.finalResult = $filter("filter")( $scope.objArray, $scope.searchObj); };
- AngularJS tiene algunos filtros incorporados que se pueden usar para reducir la ejecución de una array o una array en algunos puntos según alguna condición.
$scope.formatDate = $filter("date")($scope.date, "yyyy-MM-dd"); $scope.finalResult = $filter('uppercase')($scope.name);
Programa: Los filtros se agregan a las directivas, como ng-repeat , usando el símbolo de canalización o el carácter `|` , seguido de una etiqueta de filtro.
<!DOCTYPE html> <html> <head> <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> </script> </head> <body> <div ng-app="app1" ng-controller="piprCtrl"> <p> Looping with obj object created for nameList array: </p> <ul> <li ng-repeat="obj in nameList | orderBy:'city'"> {{ obj.name + ', ' + obj.city }} </li> </ul> </div> <script> angular.module("app1", []).controller( "piprCtrl", function($scope) { $scope.nameList = [{ name: "Hardik", city: "Chandigarh" }, { name: "Shekhar", city: "Dehradun" }, { name: "Sanyam", city: "Chandigarh" }, { name: "Poojan", city: "Dehradun" }, { name: "Aman", city: "Muzaffarnagar" }, { name: "Shashank", city: "Roorkee" }, { name: "Shazi", city: "Lucknow" }, { name: "Harshit", city: "Dehradun" }, { name: "Abhishek", city: "Gangoh" }]; }); </script> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por HardikSinghal y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA