Filtros de AngularJS

Se pueden agregar filtros en AngularJS para formatear datos.

Filtros de AngularJS

AngularJS proporciona filtros para transformar datos:

• currency Formatear un número en un formato monetario
• date Formatear una fecha en un formato específico
• filter Seleccionar un subconjunto de un array
• json Formatear un objeto en una cadena JSON
• limitTo Limitar un array/cadena a un número específico de elementos/caracteres
• lowercase Formatear la cadena en minúsculas
• number Formatear un número en una cadena
• orderBy Ordenar un array a través de una expresión
• uppercase Formatear la cadena en mayúsculas

Agregar un filtro a una expresión

Se puede usar el símbolo de tubería | para agregar un filtro a una expresión, seguido de un filtro.

uppercase El filtro formatea la cadena en mayúsculas:

Ejemplo

<div ng-app="myApp" ng-controller="personCtrl">
<p>El nombre es {{ lastName | uppercase }}</p>
</div>

Prueba personalmente

lowercase El filtro formatea la cadena en minúsculas:

Ejemplo

<div ng-app="myApp" ng-controller="personCtrl">
<p>El nombre es {{ lastName | lowercase }}</p>
</div>

Prueba personalmente

Agregar un filtro a la instrucción

Al usar el carácter de tubería | Seguido de un filtro, se puede agregar un filtro a la instrucción, por ejemplo ng-repeat:

Ejemplo

El filtro orderBy clasifica el array:

<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
  <li ng-repeat="x in names | orderBy:'country'">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>
</div>

Prueba personalmente

Filtro currency

currency El filtro formatea los números como moneda:

Ejemplo

<div ng-app="myApp" ng-controller="costCtrl">
<h1>Precio: {{ price | currency }}</h1>
</div>

Prueba personalmente

Para más información sobre el filtro currency, consulta nuestro manual de referencias de filtros AngularJS.

Filtro filter

filter El filtro selecciona un subconjunto del array.

filter El filtro solo se puede usar con arrays, y devuelve un array que contiene solo los elementos coincidentes.

Ejemplo

Devuelve los nombres que contienen la letra "i":

<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
  <li ng-repeat="x in names | filter : 'i'">
    {{ x }}
  </li>
</ul>
</div>

Prueba personalmente

Para más información sobre el filtro filter, consulta nuestro manual de referencias de filtros AngularJS.

Filtrar el array según la entrada del usuario

Al establecer ng-model Las instrucciones, podemos usar el valor del campo de entrada como la expresión en el filtro.

Escribe una letra en el campo de entrada, la lista se reducirá / ampliará según los elementos coincidentes:

• Jani
• Carl
• Margareth
• Hege
• Joe
• Gustav
• Birgit
• Mary
• Kai

Ejemplo

<div ng-app="myApp" ng-controller="namesCtrl">
<p><input type="text" ng-model="test"></p>
<ul>
  <li ng-repeat="x in names | filter : test">
    {{ x }}
  </li>
</ul>
</div>

Prueba personalmente

Clasificar el array según la entrada del usuario

Hacer clic en la cabecera de la tabla cambia el orden de clasificación:

Agregando en la cabecera de la tabla: ng-click Las instrucciones, podemos ejecutar una función que cambia el orden de clasificación del array:

Ejemplo

<div ng-app="myApp" ng-controller="namesCtrl">
<table border="1" width="100%">
  <tr>
    <th ng-click="orderByMe('name')">Name</th>
    <th ng-click="orderByMe('country')">Country</th>
  </tr>
  <tr ng-repeat="x in names | orderBy:myOrderBy">
    <td>{{x.name}}</td>
    <td>{{x.country}}</td>
  </tr>
</table>
</div>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
  $scope.names = [
    {name:'Jani',country:'Norway'},
    {name:'Carl',country:'Sweden'},
    {name:'Margareth',country:'England'},
    {name:'Hege',country:'Norway'},
    {name:'Joe',country:'Denmark'},
    {name:'Gustav',country:'Sweden'},
    {name:'Birgit',country:'Denmark'},
    {name:'Mary',country:'England'},
    {name:'Kai',country:'Norway'}
  ];
  $scope.orderByMe = function(x) {
    $scope.myOrderBy = x;
  }
});
</script>

Prueba personalmente

Filtro personalizado

Puede crear su propio filtro mediante la registro de una nueva función fábrica de filtros en el módulo:

Ejemplo

Crear un filtro personalizado llamado "myFormat":

<ul ng-app="myApp" ng-controller="namesCtrl">
  <li ng-repeat="x in names">
    {{x | myFormat}}
  </li>
</ul>
<script>
var app = angular.module('myApp', []);
app.filter('myFormat', function() {
  return function(x) {}}
    var i, c, txt = "";
    for (i = 0; i < x.length; i++) {
      c = x[i];
      if (i % 2 == 0) {
        c = c.toUpperCase();
      }
      txt += c;
    }
    return txt;
  });
});
app.controller('namesCtrl', function($scope) {
  $scope.names = ['Jani', 'Carl', 'Margareth', 'Hege', 'Joe', 'Gustav', 'Birgit', 'Mary', 'Kai'];
});
</script>

Prueba personalmente

myFormat El filtro formatea en mayúsculas cada carácter alternativo.