En este paso, aprenderá cómo crear su propio filtro de visualización.
Restablezca el directorio de trabajo:
Git Checkout -F Paso 9
Ahora vaya a una página de detalles móvil. En el paso anterior, la página de detalles del teléfono muestra "verdadero" o "falso" para indicar si un teléfono tiene una característica específica. Ahora usamos un filtro personalizado para graficar esas cadenas de texto: √ como "verdadero"; y × como "falso". Veamos cómo se ve el código de filtro.
Las diferencias más importantes entre el paso 8 y el paso 9 se enumeran a continuación. Puedes ver la diferencia completa en GitHub.
Filtros personalizados
Para crear un nuevo filtro, primero cree un módulo PhoneCatFilters y registre el filtro personalizado con este módulo.
app/js/filters.js
Angular.module ('PhoneCatFilters', []). Filter ('Checkmark', function () {return Function (input) {return Input? '/U2713': '/u2718';};});Nuestro filtro se llama Marca de verificación. Su entrada es verdadera o falsa, y devolvemos dos caracteres Unicode ( /U2713 y /U2718) que representan verdadero o falso.
Ahora que nuestro filtro está listo, necesitamos registrar nuestro módulo PhoneCatfilters como dependencia de nuestro módulo principal Phonecat.
app/js/app/js
... Angular.module ('Phonecat', ['Phonecatfilters']) ...plantilla
Dado que nuestro código de plantilla está escrito en el archivo App/JS/Filter.js, necesitamos introducir este archivo en la plantilla de diseño.
app/index.html
... <script src = "js/controlers.js"> </script> <script src = "js/filters.js"> </script> ...
La sintaxis para usar filtros en plantillas AngularJS es:
{{Expresión | Filtro}}
Aplicamos el filtro a la plantilla de detalles del teléfono:
aplicación/parcials/teléfono-detail.html
... <dl> <dt> infrarrojo </dt> <dd> {{phone.connectivity.infrado | Marca de verificación}} </dd> <dt> gps </dt> <dd> {{phone.connectivity.gps | Marca de verificación}} </dd> </dl> ...prueba
Los filtros, como otros componentes, deben probarse, y estas pruebas son realmente fáciles de completar.
Prueba/unidad/filtrosspec.js
describir ('filtre', function () {antes que el módulo ('phonecatfilters')); describir ('checkmark', function () {it ('debería convertir los valores booleanos en unicode checkmark o cross', inyect (function (checkmarkfilter) {expection (checkfilter (true)). tebe ('/u2713'); Esperar (CheckMarkFilter (False)). });Tenga en cuenta que antes de realizar cualquier prueba de filtro, debe configurar nuestro inyector de prueba para el módulo PhoneCatFilters.
Ejecutar ./scripts/test/sh para ejecutar la prueba, y debería ver la siguiente salida:
Chrome: restablecimiento del corredor ...... total 4 pruebas (aprobadas: 4; falla: 0; errores: 0) (3.00 ms) Chrome 19.0.0.1084.36 Mac OS: Ejecutar 4 pruebas (aprobado: 4; falla: 0; errores 0) (3.00 ms)
Ahora practicemos el filtro incorporado AngularJS y agregamos los siguientes enlaces a index.html:
También podemos usar un cuadro de entrada para crear un modelo y combinarlo con una unión filtrada. Agregue el siguiente código a index.html:
<input ng-model = "userInput"> upperCased: {{userInput | mayúscula}}
Resumir
Ahora que sabe cómo escribir y probar un complemento personalizado, en el paso 10 aprenderemos cómo continuar enriqueciendo la página de detalles del teléfono móvil con AngularJS.
Lo anterior es una compilación de la información sobre el filtro AngularJS. Continuaremos agregando información relevante en el futuro. ¡Gracias por su apoyo a este sitio!