manifestación
Aquí está toda la demostración de ejemplo
1. Archivo Filter.js
Angular.module ("ESPPLEAPP", []). Constant ("ProductUrl", "http: // localhost:/productos") .controller ("defaultctrl", function ($ scope, $ http, productos) {$ http.get (productos) .success (función (función) {$ scope.productos; array});});Aquí uso el servicio introducido como una constante, y la ventaja de escribir esto es que puedo modificarlo fácilmente.
Para obtener cómo usar el servicio $ HTTP, consulte mi AngularJS (III) implementado
<! Doctype html> <html xmlns = "http://www.w.org//xhtml" ng-app = "examenpppp"> <head> <meta http " src = "angular.js"> </script> <link href = "bootstrap-theme.css" rel = "stylesheet"/> <link href = "bootstrap.css" rel = "stylesheet"/> <script src = "filtre.js"> </script> </head> <body ng-controller = "predeterminado" > <div> <div> <h> productos </h> </div> <table> <thead> <tr> <td> name </td> <td> categoría </td> <td> precio </td> <td> expiry </td> </tr> </thead> <ttr ng-depreat = "item en productos"> <td> {Iem. uppercase}} </td> <td> {{item.category}} </td> <td> {{item.price | moneda}} </td> <td> {{item.expiry | número}} </td> <td> {{item | JSON}} </td> </tr> </tbody> </table> </div> </body> </html>Resultados de la ejecución:
Usar filtro
Los filtros se dividen en dos categorías:
1. Filtrar datos individuales
2. Operar en el conjunto.
1. Es relativamente simple operar los datos . Como se muestra en la demostración, se puede formatear en {{item | moneda}}, etc.
Moneda: "F" puede ser el precio filtrado en libras.
Un solo filtro de datos desea filtrar el formato de datos, después del filtro: en el carácter de formato correspondiente.
Número: representa los lugares decimales de datos reservados.
2: Filtrado de colección , filtrando un cierto número de la colección.
En la demostración básica, agregué esto:
<Viv> <h> productos </h> </div> <div> límite: <select ng-model = "limitValue" ng-options = "p para p en limitRange"> </elect> </div> filtre.js se ha agregado: $ http.get (productUrl) .success (función (datos) {$ scope.products = data; // directamente a Array. $ scope.limitvalue = ""; // si es una cadena <span style = "de fondo de fondo: rgb (,);"> $ scope.limitrange = []; for (var i =; i <= $ scope.products.length; i ++) {$ scope.limitrange.push (.Tostring ()); <spate style = "Background-COLOR:", ",", ",", ";", ",", ",", ",", ";"; ";", ",", ",", ",", ",", ",", "," ("," (",", ",", ",", ",", ",", ",", "(", "(", ",", "(", "," (",", "(", "(", ",", ",", "(", ",", "(", "(", "(", "(" } </span> </span>}); <tr ng-repeat = "elemento en productos | Limitto: LimitValue"> <td> {{item.name | uppercase}} </td> <td> {{item.category}} </td> <td> {{item.price | moneda}} </td> <td> {{item.expiry | número}} </td> <td> {{item | JSON}} </td> </tr> <span style = "Line-Height:.Al escribir funciones, debe estar escrito en éxito porque los datos JSON se obtienen de manera asincrónica.
resultado:
Límite: puede ajustar el número de visualizado en la página.
Crear filtro
AngularJS tiene dos filtros. Primero, podemos crear filtros que formaten datos individuales, como: la cadena de salida de capitalización de la primera letra.
Primero hablemos sobre cómo definir un filtro: el filtro se crea a través de módulo.filter, y el formato general de la creación es:
Angular.module ("EjemplAppp") // significa obtener un módulo. El filtro se crea debajo del módulo.
.filter ("Labelcase", function () {// Recibe dos parámetros, el primer parámetro representa el nombre del filtro, y el segundo es una función de fábrica
Función de retorno (valor, reverso) {// Devuelve una función de trabajador para filtrar el proceso de filtrado correspondiente. El primer parámetro indica el objeto que debe formatearse, y el segundo parámetro indica la configuración y qué formato seguir.
if (angular.isstring (valor)) {var intermediate = reverse? value.ToUpperCase (): value.tOlowerCase (); return (reverse? Intermediate []. tOlowerCase (): intermediate []. toupperCase () + intermediate.substr ());} else {valor de retorno;}}});Escribí esto en un archivo JS. CustomFilter.js No olvide agregarlo.
<link href = "bootstrap.css" rel = "stylesheet"/> <script src = "filter.js"> </script> <script src = "customFilter.js"> </script>
Ok, ahora cambiaré los datos:
<TD> {{item.name | Labelcase: true}} </td>Como se mencionó anteriormente, si necesita agregar información de configuración, el formato de escritura es filtro: opción
Por supuesto, los parámetros predeterminados no se pueden escribir, y el valor predeterminado se dará nulo o indefinido.
resultado:
Es tan fácil personalizar una función de filtro para procesar cada datos.
2. Personaliza las funciones procesadas por una colección, al igual que Limitto.
Angular.module ("ESPPLEAPP"). FILTER ("Labelcase", function () {return function (value, reverse) {if (angular.isstring (value)) {var intermediate = reverse? value.toupPercase (): value.tolowerCase (); return (invermed []. tolowerCase (): intermediar []. touPercase () +) +) +) +) intermediate.substr ());} else {value de retorno;}}}). datos;}}});La parte modificada HTML:
<tr ng-repeat = "elemento en productos | Skip:">
Resultados: Hay un total de seis piezas de datos, y se pasaron 2 piezas utilizando un filtro de omisión.
Al personalizar el filtro, descubrí que se ha definido un filtro. No quiero definirlo repetidamente. ¿Qué tengo que hacer? También podemos usar un filtro creado para crearlo.
Angular.module ("ESPPLEAPP"). FILTER ("Labelcase", function () {return function (value, reverse) {if (angular.isstring (value)) {var intermediate = reverse? value.toupPercase (): value.tolowerCase (); return (invermed []. tolowerCase (): intermediar []. touPercase () +) +) +) +) intermediate.substr ());} else {value de retorno;}}}). data;}}}). Filter ("Take", function ($ filtre) {// Puede ver que hago referencia al servicio incorporado de AngularJS en la función de fábrica. Función de retorno (Data, Skipcount, Takecount) {// Puede ver si puede pasar tres parámetros aquí. $ Filtro ("Limitto") (SkipData, TakeCount); // Limitto es un filtro incorporado.$ Filtro ('Skip') llama al filtro de omisión, porque devuelve una función, por lo que podemos continuar pasando parámetros.
<tr ng-repeat = "elemento en productos | tomar ::">
resultado:
Así es como se realiza el filtro. ¿No es muy simple?