Los últimos tutoriales de desarrollo web
 

AngularJS filtros

❮ Anterior Siguiente Capítulo ❯

Los filtros pueden ser añadidos en AngularJS a datos de formato.

Filtros AngularJS

AngularJS ofrece filtros para transformar los datos:

  • currency formato a un número a un formato de moneda.
  • date formato de una fecha a un formato especificado.
  • filter seleccionar un subconjunto de elementos de una matriz.
  • json formato a un objeto a una cadena JSON.
  • limitTo Límites de una matriz / cuerda, en un número determinado de elementos / personajes.
  • lowercase Formato de una cadena a minúsculas.
  • number formato a un número en una cadena.
  • orderBy Ordena una matriz por una expresión.
  • uppercase Formato de una cadena a mayúsculas.

Cómo añadir filtros a las expresiones

Los filtros pueden ser añadidos a las expresiones utilizando el carácter de canalización | , seguido por un filtro.

Las uppercase cadenas de formato de filtro en mayúsculas:

Ejemplo

<div ng-app="myApp" ng-controller="personCtrl">

<p>The name is {{ lastName | uppercase }}</p>

</div>
Inténtalo tú mismo "

Las lowercase cadenas de formato de filtro a minúsculas:

Ejemplo

<div ng-app="myApp" ng-controller="personCtrl">

<p>The name is {{ lastName | lowercase }}</p>

</div>
Inténtalo tú mismo "

Cómo añadir filtros a las Directivas

Los filtros se añaden a las directivas, como ng-repeat , mediante el uso de la barra vertical | , seguido de un filtro:

Ejemplo

El orderBy filtro ordena una matriz:

<div ng-app="myApp" ng-controller="namesCtrl">

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

</div>
Inténtalo tú mismo "

El filtro de la moneda

La currency filtro de formato a un número como moneda:

Ejemplo

<div ng-app="myApp" ng-controller="costCtrl">

<h1>Price: {{ price | currency }}</h1>

</div>
Inténtalo tú mismo "

Más información sobre el filtro de moneda en nuestra moneda AngularJS filtro de referencia

El filtro de filtro

El filter filtro selecciona un subconjunto de una matriz.

El filter filtro sólo se puede utilizar en las matrices, y devuelve una matriz que contiene sólo los elementos que coincidan.

Ejemplo

Devolver los nombres que contiene la letra "i":

<div ng-app="myApp" ng-controller="namesCtrl">

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

</div>
Inténtalo tú mismo "

Más información sobre el filtro de filtro en nuestro filtro de filtro de referencia AngularJS

Filtrar una matriz basada en la entrada del usuario

Al establecer el ng-model directiva sobre un campo de entrada, podemos usar el valor del campo de entrada como una expresión en un filtro.

Escribir una letra en el campo de entrada, y la lista se reducirá / crecer en función del partido:

  • {{ x }}

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>
Inténtalo tú mismo "

Ordena una matriz basada en la entrada del usuario

Haga clic en los encabezados de tabla para cambiar el orden de clasificación ::

Nombre País
{{}} X.name {{}} X.country

Al añadir el ng-click directiva sobre los encabezados de la tabla, se puede ejecutar una función que cambia el orden de clasificación de la matriz:

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>
Inténtalo tú mismo "

Los filtros personalizados

Usted puede hacer sus propios filtros mediante el registro de una nueva función de filtro de fábrica con su módulo:

Ejemplo

Hacer 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>
Inténtalo tú mismo "

El myFormat filtro dará formato a todos los demás caracteres en mayúsculas.


❮ Anterior Siguiente Capítulo ❯