¿Qué son los filtros en AngularJS?

Posted on by Rudeus Greyrat

En este artículo, discutiremos los filtros en AngularJS. Se pueden agregar filtros en AngularJS para dar formato a los datos para que se muestren en la interfaz de usuario sin cambiar el formato original. Los filtros se pueden agregar a una expresión o directivas usando la tubería | símbolo.

{{expression | filterName:parameter }}

Filtros AngularJS: AngularJS proporciona filtros para transformar datos de diferentes tipos de datos. La siguiente tabla muestra los filtros significativos:

Nombre del filtro Descripción
divisa Se utiliza para convertir un número en un formato de moneda.
fecha Se utiliza para convertir una fecha en un formato específico.
filtrar Se utiliza para filtrar la array y los elementos del objeto y devolver los elementos filtrados.
json Para convertir un objeto JavaScript en JSON.
limitado a Se utiliza para devolver una array o una string que contiene un número específico de elementos.
minúsculas Se utiliza para convertir una string en letras minúsculas.
mayúscula Se utiliza para convertir una string en letras mayúsculas.
número Se utiliza para convertir un número en una string o texto. 
ordenar por Ordena una array en función de expresiones de predicado especificadas.

1. Filtro de moneda: este filtro se utiliza para convertir un número a un formato de moneda. Cuando no se implementa ningún formato de moneda, el filtro de moneda utiliza el formato de moneda local.
 

Sintaxis: 

{{ currency_expression | currency : symbol : fractionSize}}

Ejemplo:

HTML

<!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="costCtrl">
        <h2>Price: {{ price | currency }}</h2>
    </div>
 
    <script>
        var app = angular.module("app1", []);
        app.controller("costCtrl", function ($scope) {
            $scope.price = 100;
        });
    </script>
 
     
<p>
        This currency filter formats a
        number to a currency format.
    </p>
 
</body>
 
</html>

Producción:

El filtro de moneda da formato a un número como moneda.

2. Filtro de fecha: este filtro se utiliza para convertir una fecha en un formato específico. Si no se especifica el formato de fecha, se utiliza el formato predeterminado de fecha ‘MMM d, aaaa’.
 

Sintaxis:

{{ date | date : format : timezone }}

Ejemplo:

HTML

<!DOCTYPE html>
<html>
 
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js">
    </script>
</head>
 
<body ng-app>
    <h1>AngularJS Date Filter</h1>
     
    <div ng-init="person.DOB = 323234234898">
        Default date: {{person.DOB| date}} <br />
        Medium date: {{person.DOB| date:'medium'}} <br />
        Full date: {{person.DOB | date:'fullDate'}} <br />
        Year: {{person.DOB | date:'yyyy'}} <br />
    </div>
</body>
 
</html>

Producción:

Filtro de fecha

3. filtro Filtro: este filtro se utiliza para filtrar la array y los elementos del objeto y devolver una nueva array.
  
 Sintaxis:

{{ expression | filter : filter_criteria }}

Ejemplo: 

HTML

<!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="namesCtrl">
        <ul>
            <li ng-repeat="x in names | filter : 'i'">{{ x }}</li>
        </ul>
    </div>
 
    <script>
        angular.module("app1", []).controller(
            "namesCtrl", function ($scope) {
                $scope.names = [
                    "Dhoni",
                    "Virat",
                    "Sachin",
                    "Rohit",
                    "Suresh",
                    "Sehwag",
                    "Zadeja",
                    "Ashwin",
                    "Harbhajan",
                ];
            });
    </script>
 
     
<p>
        This example displays only the names
        containing the letter "i".
    </p>
 
</body>
 
</html>

Producción:

El filtro Filtro

4. Filtro json: este filtro se utiliza para convertir un objeto JavaScript en JSON.
 

Sintaxis: 

 {{ object | json : spacing }}

Ejemplo:

HTML

<!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="vegetable" ng-controller="vegetableCtrl">
        <h1>Vegetable:</h1>
 
        <pre>{{vegetable | json : 10}}</pre>
    </div>
 
    <script>
        var app = angular.module("vegetable", []);
        app.controller("vegetableCtrl", function ($scope) {
            $scope.vegetable = [
                "Beetroot",
                "Carrot",
                "Potato",
                "Asparagus",
                "Eggplant",
            ];
        });
    </script>
</body>
 
</html>

Producción:

Filtro json.

5. LimitTo Filter: este filtro se utiliza para devolver una array o una string que contiene un número detallado de elementos. Se utiliza para strings y números. Devuelve una string que contiene solo el número especificado de dígitos y caracteres.
 

Sintaxis:

{{ object | limitTo : limit : begin }}

  
Parámetros:

limit: especifica la longitud de la array o las strings devueltas.

Inicio: especifica el índice con el que comienza la limitación. Por defecto, su valor es cero.

 Ejemplo: 

HTML

<!DOCTYPE html>
<html>
 
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
    </script>
</head>
 
<body>
    <div ng-app="app1" ng-controller="sizeCtrl">
         
<p>
            Displays only the first 3 cars
            because limit is 3 (positive).
        </p>
 
 
        <ul>
            <li ng-repeat="x in cars | limitTo : 3">{{x}}</li>
        </ul>
 
         
<p>
            Displays only the last 3 cars
            because limit is -3 (negative).
        </p>
 
 
        <ul>
            <li ng-repeat="x in cars | limitTo : -3">{{x}}</li>
        </ul>
    </div>
 
    <script>
        var app = angular.module("app1", []);
        app.controller("sizeCtrl", function ($scope) {
            $scope.cars = ["Alto", "Breeza",
            "ciaz", "Maruti", "Fortuner", "Verna"];
        });
    </script>
</body>
 
</html>

Producción: 

limitTo Filter.

6. minúsculas: este filtro se utiliza para convertir una string en letras minúsculas.
 

Sintaxis:

{{expression|lowercase}}

Ejemplo:

HTML

<!DOCTYPE html>
<html>
 
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>
</head>
 
<body>
    <h2>AngularJS | lowercase</h2>
 
    <div ng-app="app1" ng-controller="lowCtrl">
        <strong>Input:</strong>
        <input type="text" ng-model="string" />
        <strong>Output:</strong>
        {{string|lowercase}}
    </div>
 
    <script>
        var app = angular.module("app1", []);
        app.controller("lowCtrl", function ($scope) {
            $scope.string = "";
        });
    </script>
</body>
 
</html>

Producción: 

Filtro en minúsculas.

  
7. mayúsculas: este filtro se utiliza para convertir una string en una letra mayúscula.
 

Sintaxis:

{{ string | uppercase}}

 Ejemplo: 

HTML

<!DOCTYPE html>
<html>
 
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>
</head>
 
<body>
    <h2>AngularJS | uppercase</h2>
    <div ng-app="app1" ng-controller="upCtrl">
        <strong>Input:</strong>
        <input type="text" ng-model="string" />
        <strong>Output:</strong>
        {{string|uppercase}}
    </div>
 
    <script>
        var app = angular.module("app1", []);
        app.controller("upCtrl", function ($scope) {
            $scope.string = "";
        });
    </script>
</body>
 
</html>

Producción:

Filtro en mayúsculas.

8. Filtro de número: este filtro se utiliza para convertir un número en una string o texto.
 

Sintaxis:

{{ string| number : fractionSize}}

Ejemplo:

HTML

<!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="nCtrl">
        <h1>{{value | number : 4}} kg</h1>
    </div>
 
    <script>
        var app = angular.module("app1", []);
        app.controller("nCtrl", function ($scope) {
            $scope.value = 34355;
        });
    </script>
 
     
<p>The value is written with three decimals.</p>
 
</body>
 
</html>

Producción: 

número de filtro.

9. filtro orderBy: este filtro ordena una array según las expresiones de predicado especificadas.
 

Sintaxis:

{{ orderBy_expression | orderBy : expression : reverse }}

Ejemplo: 

HTML

<!DOCTYPE html>
<html>
 
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js">
    </script>
</head>
 
<body ng-app="app1">
    <h1>AngularJS | orderBy</h1>
    <div ng-controller="myController">
        <select ng-model="SortOrder">
            <option value="+name">Name (asc)</option>
            <option value="-name">Name (dec)</option>
            <option value="+phone">Phone (asc)</option>
            <option value="-phone">Phone (dec)</option>
        </select>
        <ul ng-repeat="person in persons | orderBy:SortOrder">
            <li>{{person.name}} - {{person.phone}}</li>
        </ul>
    </div>
     
    <script>
        var myApp = angular.module("app1", []);
        myApp.controller("myController", function ($scope) {
            $scope.persons = [
                { name: "John", phone: "008-452-8276" },
                { name: "Mahira", phone: "879-303-3345" },
                { name: "Minakshi", phone: "545-474-4351" },
                { name: "Billa", phone: "545-788-5678" },
                { name: "vanya", phone: "463-494-8705" },
                { name: "Rashi", phone: "315-315-5698" },
            ];
            $scope.SortOrder = "+name";
        });
    </script>
</body>
 
</html>

Producción:

ordenar por filtro.

Publicación traducida automáticamente

Artículo escrito por arelemegha y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *