Exploración de AngularJs: explicación detallada del filtro (filter)

El filtro (filter), como su nombre indica, actúa recibiendo una entrada, procesándola mediante ciertas reglas y devolviendo el resultado procesado. Se utiliza principalmente en la formateo de datos, por ejemplo, obtener un subconjunto de un array, ordenar los elementos de un array, etc. ng tiene algunos filtros integrados, son: currency (moneda), date (fecha), filter (Coincidencia de subcadena), json (formateo de objeto json), limitTo (límite de cantidad), lowercase (minúsculas), uppercase (mayúsculas), number (número), orderBy (ordenar). En total, nueve. Además, se pueden definir filtros personalizados, lo que es muy potente y puede satisfacer cualquier requerimiento de procesamiento de datos.

El contenido del filtro es muy simple, solo hay que entender cómo usar los内置的 y cómo definir un filtro propio, así está bien ~ Hoy he aprendido bastante sobre esto, aquí hago una introducción.

Dos formas de usar filter

1. Uso de filter en plantillas

Podemos usar filter directamente en {{}}, y usar | para separarlo después de la expresión, la sintaxis es la siguiente:

{{ expression | filtro }}

también se pueden usar múltiples filtros juntos, la salida del filtro anterior se utilizará como la entrada del siguiente filtro (no es de extrañar que sea tan parecido a un tubo...)

{{ expression | filtro1 | filter}}2 | ... }}

filter可以接收参数，参数用 : 进行分割，如下：

{{ expression | filter:argument1:argument2:... }}

除了对{{}}中的数据进行格式化，我们还可以在指令中使用filter，例如先对数组array进行过滤处理，然后再循环输出：

<span ng-repeat="a in array | filter ">

2. En el controller y el servicio se utiliza filter

在我们的js代码中也可以使用过滤器，方式就是我们熟悉的依赖注入，例如我要在controller中使用currency过滤器，只需将它注入到该controller中即可，代码如下：

app.controller('testC',function($scope,currencyFilter){
 $scope.num = currencyFilter(123534); 
};

En el template, puedes usar {{num}} para salida directa de $123,534En el servicio también se utiliza el mismo principio de filter.

此时你可能会有疑惑，如果我要在controller中使用多个filter，难道要一个一个注入吗，这岂不太费劲了？小兄弟莫着急~ng提供了一个$filter服务可以来调用所需的filter，你只需注入一个$filter就够了，使用方法如下：

app.controller('testC',function($scope,$filter){
 $scope.num = $filter('currency')(123534);
　　$scope.date = $filter('date')(new Date()); 
};

可以达到同样的效果。好处是你可以方便使用不同的filter了。

内置过滤器 de ng

ng tiene内置了九种过滤器，使用方法都非常简单，看文档即懂。不过为了以后不去翻它的文档，我在这里还是做一个详细的记录。

1. currency (manejo de moneda)

El uso de currency puede convertir números en formato monetario, el símbolo predeterminado es el dólar, puedes ingresar el símbolo necesario, por ejemplo, ingrese RMB:

{{num | currency : '￥'}}

2. date (formateo de fecha)

La capacidad de formateo de fechas de JavaScript nativo es limitada, el filtro de date proporcionado por ng puede satisfacer básicamente los requisitos de formateo generales. El uso es el siguiente:

{{date | date : 'yyyy-MM-dd hh:mm:ss EEEE'}}

参数用来指定所要的格式，y M d h m s E 分别表示 年 月 日 时 分 秒 星期，你可以自由组合它们。也可以使用不同的个数来限制格式化的位数。另外参数也可以使用特定的描述性字符串，例如“shortTime”将会把时间格式为12:05 pm这样的。ng提供了八种描述性的字符串，个人觉得这些有点多余，我完全可以根据自己的意愿组合出想要的格式，不愿意去记这么多单词~

3. filter(匹配子串)

这个名叫filter的filter（不得不说这名字起的，真让人容易混淆——！）用来处理一个数组，然后可以过滤出含有某个子串的元素，作为一个子数组来返回。可以是字符串数组，也可以是对象数组。如果是对象数组，可以匹配属性的值。它接收一个参数，用来定义子串的匹配规则。下面举个例子说明一下参数的用法，我用现在特别火的几个孩子定义了一个数组：

$scope.childrenArray = [
  {name:'kimi',age:3},
  {name:'cindy',age:4},
  {name:'anglar',age:4},
  {name:'shitou',age:6},
  {name:'tiantian',age:5};
 ];
$scope.func = function(e){return e.age>4;}

{{ childrenArray | filter : 'a' }} //Coincide con el valor del atributo que contiene a
{{ childrenArray | filter : 4 }} //Coincide con el valor del atributo que contiene4
{{ childrenArray | filter : {name : 'i'} }} //El parámetro es un objeto, que coincide con el atributo name que contiene i
{{childrenArray | filter : func }} //El parámetro es una función, que especifica el valor de age>4

4.json(formatear objeto JSON)

El filtro JSON puede formatear un objeto JS en una cadena JSON sin parámetros. ¿Para qué sirve esto, generalmente no imprimo una cadena JSON en la página, dice el sitio web oficial que se puede usar para depuración, bueno, es una buena opción. O también se puede usar en JS, su función es similar a la conocida JSON.stringify(). La forma de usarlo es muy sencilla:

{{ jsonTest | json}}

5. limitTo(longitud del array o cadena)

El filtro limitTo se utiliza para cortar un array o una cadena, recibe un parámetro para especificar la longitud del corte, si el parámetro es negativo, se corta desde el final del array. Creo que este filtro es bastante inútil, ya que solo puede cortar desde el principio del array o la cadena./Se realiza un corte en la parte final, además, las funciones nativas de js pueden reemplazarla, veamos cómo se usa:

{{ childrenArray | limitTo : 2 }} //Se mostrarán los dos primeros elementos del array

6. lowercase(minúsculas)

Convierte los datos en minúsculas. Muy simple, no necesito explicar más. También es un filtro bastante inútil, sin parámetros, solo puede convertir toda la cadena en minúsculas, no se puede especificar el carácter. Ni siquiera quiero escribir cómo se usa.

7. uppercase(mayúsculas)

Como antes.

8. number(formatear número)

El filtro number puede agregar separadores de miles a un número, como así:123,456,789. También recibe un parámetro que puede especificar cuántos decimales mantener para el tipo float:

{{ num | number : 2 }}

9. orderBy(orden)

El filtro orderBy puede ordenar los elementos de un array, recibe un parámetro para especificar las reglas de ordenación, el parámetro puede ser una cadena, que indica ordenar por el nombre del atributo. Puede ser una función, que define el atributo de ordenación. También puede ser un array, que indica ordenar según los valores de los atributos en el array (si los valores del primer elemento son iguales, se compara el segundo elemento), tomemos el array de niños anteriores como ejemplo:

<div>{{ childrenArray | orderBy : 'age' }}</div>/div>  //Se ordena según el valor del atributo age, si es-Si es age, se ordena al revés
<div>{{ childrenArray | orderBy : orderFunc }}</div>/div> //Se ordena según el valor de retorno de la función
<div>{{ childrenArray | orderBy : ['age','name'] }}</div>/div> //Si el valor de age es el mismo, se ordena según el nombre

Se ha explicado el filtro integrado, lo que me hizo dormir casi. Como puedes ver, los filtros integrados de ng no son omnipotentes, de hecho, muchos son bastante inútiles. Para necesidades más personalizadas, tendremos que definir nuestros propios filtros. Ahora veamos cómo podemos personalizar los filtros.

Filtro personalizado

La forma de personalizar los filtros también es很简单, utiliza el método filter del módulo, devuelve una función, esta función recibe el valor de entrada y devuelve el resultado procesado. Sin más preámbulos, veamos uno. Por ejemplo, necesito un filtro que pueda devolver los elementos de un array cuyos índices son pares, el código es el siguiente:

app.filter('odditems',function(){
 return function(inputArray){
  var array = [];
  for(var i=0;i<inputArray.length;i++{
   if(i%2!==0){
    array.push(inputArray[i]);
   };
  };
  return array;
 };
});

El formato es así, tu lógica de procesamiento se escribe en la función de clausura interna. También puedes hacer que tu filtro reciba parámetros, que se definen en la función de retorno como el segundo parámetro, o más parámetros también pueden ser.

Eso es todo lo que debes saber sobre los filtros. Una vez más, lo que realmente necesitas aprender se aprende a través de la prueba real del proyecto. Entonces, antes de que el proyecto llegue, primero fortalece tu base.

Esto es todo el contenido del artículo, espero que haya sido útil para su aprendizaje y que todos los demás apoyen el tutorial de grito.

Declaración: El contenido de este artículo se obtiene de la red, pertenece al propietario original, el contenido se contribuye y carga espontáneamente por los usuarios de Internet, este sitio web no posee los derechos de propiedad, no se ha realizado un procesamiento editorial manual y no asume la responsabilidad de las responsabilidades legales relacionadas. Si encuentra contenido sospechoso de infracción de derechos de autor, le invitamos a enviar un correo electrónico a: notice#w, proporcionando evidencia relevante.3Declaración: El contenido de este artículo se obtiene de la red, pertenece al propietario original, el contenido se contribuye y carga espontáneamente por los usuarios de Internet, este sitio web no posee los derechos de propiedad, no se ha realizado un procesamiento editorial manual y no asume la responsabilidad de las responsabilidades legales relacionadas. Si encuentra contenido sospechoso de infracción de derechos de autor, le invitamos a enviar un correo electrónico a: notice#w, proporcionando evidencia relevante. Una vez verificada, este sitio eliminará inmediatamente el contenido sospechoso de infracción.