En el mundo de AngularJS, Filter proporciona una forma de formatear datos. Angular también nos proporciona muchos filtros incorporados, y también es bastante simple crear filtros personalizados.
En la vinculación de la plantilla HTML {{}}, usamos | para llamar a los filtros. Por ejemplo, queremos que la cadena muestre todos los caracteres de capital:
{{nombre | mayúscula}}Por supuesto, también podemos usar el servicio $ filtro en JavaScript para llamar a los filtros y usar la capitalización de cadenas como ejemplo:
app.controller ('Democontroller', ['$ scope', '$ filtre', function ($ scope, $ filtre) {$ scope.name = $ filtre ('mintercase') ('ari');}]);¿Cómo pasar los parámetros para filtrar? Simplemente coloque los parámetros después del filtro y agregue un colon en el medio (si hay múltiples parámetros para pasar, agregue un colon después de cada parámetro). Por ejemplo, un filtro de números puede ayudarnos a limitar el número de dígitos. Si desea mostrar dos decimales, agregue el número: 2.
{{123.456789 | Número: 2}}El filtro de filtro se utiliza principalmente para filtrar una matriz de datos y devolver una nueva matriz que contiene datos de subarrías.
Por ejemplo, al buscar en el lado del cliente, podemos filtrar rápidamente los resultados que queremos de la matriz.
Este método de filtro recibe un parámetro de cadena, objeto o función para seleccionar/eliminar elementos de matriz.
Echemos un vistazo en detalle:
1. Filtro incorporado
1, mayúscula, conversión de tamaño en minúsculas
{{"cadena de tapa inferior" | uppercase}} // resultado: cadena de tapa más baja {{"El tanque es bueno" | minúsculas}} // resultado: el tanque es bueno｜ La línea vertical aquí es una función de tubería. Si está familiarizado con Linux, la función de la tubería de esta parte es básicamente la misma que 2, JSON formateada
{{{foo: "bar", baz: 23} | json}} // resultado: {"foo": "bar", "baz": 23}Nota: BZA no tiene cotizaciones dobles antes de formatear, y se convierte en datos JSON después del formateo.
3. Formateo de la fecha
MySQL TimeStamp ng-bind = "Message.Time * 1000 | Fecha: 'aaa yyyy-mm-dd'"
{{1304375948024 | Fecha: 'Medio'}} // 03 de mayo de 2011 06:39:08 PM {{1304375948024 | fecha}} // resultado: 3 de mayo de 2011 {{1304375948024 | Fecha: "mm/dd/yyyy @ h: mma"}} // resultado: 03/03/2011 @ 6:39 am {{1304375948024 | Fecha: "Yyyy-MM-DD HH: MM: SS"}} // Resultado: 2011-05-03 06:39:084. Número Formateo
{{1.234567 | Número: 1}} // resultado: 1.2 {{1234567 | número}} // resultado: 1,234,5675. Moneda Formateo de moneda
{{250 | moneda}} // resultado: $ 250.00 {{250 | moneda: "RMB ￥"}} // resultado: RMB ￥ 250.006. La búsqueda del filtro solo puede verificar el valor, no la clave
{{[[{"edad": 20, "id": 10, "nombre": "iPhone"}, {"edad": 12, "id": 11, "nombre": "sunm xing"}, {"edad": 44, "id": 12, "nombre": "prueba ABC"}] | Filtro: 's'}} // Encuentra filas con s // El resultado del ejemplo anterior: [{"edad": 12, "id": 11, "nombre": "sunm xing"}, {"edad": 44, "id": 12, "nombre": "prueba abc"}]}] {{{"edad": 20, "id" 12, "id": 11, "nombre": "sunm xing"}, {"edad": 44, "id": 12, "nombre": "prueba abc"}] | Filtro: {'name': 'ip'}}} // Encuentre la línea de nombre como IP // El resultado del ejemplo anterior: [{"edad": 20, "id": 10, "nombre": "iPhone"}] $ filtro ('número') (30000, 2); var jsonstring = $ filtre ('json') ({"edad": 12, "id": 11, "nombre": "sunm xing"}, {"edad": 44, "id": 12, "nombre": "Test ABC"}])7. cadena de limitto, intercepción de objeto
{{"I Love Tank" | Limitto: 6}} // Resultado: Amo {{"I Love Tank" | limitto: -4}} // resultado: tanque {{[{"edad": 20, "id": 10, "nombre": "iPhone"}, {"edad": 12, "id": 11, "nombre": "sunm xing"}, {"edad": 44, "id": 12, "nombre": "Test ABC"}] | Limitto: 1}} // resultado: [{"edad": 20, "id": 10, "nombre": "iPhone"}]8. Ordenby Ordenar objetos
{{[[{"edad": 20, "id": 10, "nombre": "iPhone"}, {"edad": 12, "id": 11, "nombre": "sunm xing"}, {"edad": 44, "id": 12, "nombre": "prueba ABC"}] | Orderby: 'id': true}} // Root Id Descending Order {{[{"Age": 20, "id": 10, "Nombre": "iPhone"}, {"edad": 12, "id": 11, "nombre": "sunm xing"}, {"edad": 44, "id": 12, "nombre": "prueba abc"}}]}] Orderby: 'id'}} // Sorted {{[{"edad": 20, "id": 10, "nombre": "iPhone"}, {"edad": 12, "id": 11, "nombre": "sunm xing"}, {"edad": 44, "id": 12, "nombre": "prueba abc"}] | Orderby: ['-edad', 'nombre']}}2. Función de filtro personalizado
El método de personalización del filtro también es muy simple. Use el método de filtro del módulo para devolver una función que recibe el valor de entrada y devuelve el resultado procesado.
app.filter ('Filter Name', function () {Función de retorno (objeto que necesita ser filtrado, Filtro Parámetro 1, Filtro Parámetro 2, ...) {//... algunas cosas Devuelve el objeto procesado;}});Encontré un marco básico AngularJS MVC, Phonecat y Filter personalizado, que también se escribe sobre esta base. Este marco es muy útil.
filters.js agregue un módulo
angular.module ('TankTest', []). Filter ('TankReplace', function () {return Function (input) {return input.replace (/tank/, "======")};});Llamado en html
{{"El tanque es bueno" | minúsculas | TankReplace}} // resultado: ===== es buenoNota: | minúsculas | Los comandos de tuberías de TankReplace pueden tener múltiples
YourApp.Filter ('OrderObjectBy', function () {return Function (elementos, campo, inverso) {var filtrado = []; angular.forEach (elementos, function (item) {filtred.push (item);}); filtred.sort (function (a, b) {return (a [campo]> b [campo]? 1: --1);}); if (reverse) filtrado (returner (burnthen (campo]> b [campo]? 1: --1);}); if (reverse) Filtered. };Este filtro convierte el objeto en una matriz estándar y lo clasifica por los campos que especifica. Puede usar el filtro OrderObjectby para parecerse a Orderby, incluido un valor booleano después del nombre del campo, en el orden especificado si debe revertirse. En otras palabras, el falso es el orden ascendente, el verdadero declive. llamada html
<li ng-repeat = "elemento en elementos | ordenoBjectby: 'color': true"> {{item.color}} </li>Búsqueda de clasificación
<input type = "text" ng-model = "search" placeHoldeer = "search"> <thead> <tr> <!-ng-class = "{Delwup: true}"-> <th ng-click = "cambieSorder ('id')" ng-class = "{dropp: orden === '' '}"> Número de producto <span ng-class = "{ordencolor: orden 'id'} "> </span> </th> <th ng-click =" cambiaer ('name') "ng-class =" {Delwup: orden === '' '} "> Nombre del producto <span ng-class =" {ordencolor: orderType ===' 'name'} "> </th> <th th> th-click =" ChangeOrge (precio ') orden === ''} "> Price del producto <span ng-class =" {ordencolor: ordenype === 'precio'} "> </span> </th> </tr> </thead> <tbody> <ttr ng-repeat =" item en ProductData: Search | <TD> {{item.name}} </td> <td> {{item.price | moneda: '￥'}} </td> </tr> </tbody>angularjs
// campo de clasificación predeterminado $ scope.orderType = 'id'; $ scope.order = '-'; $ scope.changeOrder = function (type) {console.log (type); $ scope.orderType = type; if ($ scope.order === '' ') {$ scope.order ='-'; } else {$ scope.order = ''; }}