No mundo dos angulares, o filtro fornece uma maneira de formatar dados. A Angular também nos fornece muitos filtros internos e também é bastante simples criar filtros personalizados.
Na ligação do modelo HTML {{}}, usamos | para ligar para filtros. Por exemplo, queremos que a string exiba todos os personagens de capital:
{{nome | Uppercase}}Obviamente, também podemos usar o serviço $ filtro em javascript para chamar filtros e usar a capitalização de strings como exemplo:
App.Controller ('Democontroller', ['$ scope', '$ filtro', função ($ scope, $ filtro) {$ scope.name = $ filtro ('minúsculo') ('ari');}]);Como passar os parâmetros para filtrar? Basta colocar os parâmetros após o filtro e adicionar um cólon no meio (se houver vários parâmetros a serem passados, adicione um cólon após cada parâmetro). Por exemplo, um filtro numérico pode nos ajudar a limitar o número de dígitos. Se você deseja exibir dois lugares decimais, adicione o número: 2.
{{123.456789 | Número: 2}}O filtro do filtro é usado principalmente para filtrar uma matriz de dados e retornar uma nova matriz contendo dados de Subarray.
Por exemplo, ao pesquisar no lado do cliente, podemos filtrar rapidamente os resultados que queremos da matriz.
Esse método de filtro recebe um parâmetro de sequência, objeto ou função para selecionar/remover elementos de matriz.
Vamos dar uma olhada em detalhes:
1. Filtro embutido
1, conversão de tamanho minúsculo
{{"String inferior da tampa inferior" | Uppercase}} // Resultado: String de capitalização inferior {{"tank é boa" | minúsculo}} // resultado: o tanque é bom｜ A linha vertical aqui está uma função de pipeline. Se você está familiarizado com o Linux, a função de pipeline desta parte é basicamente a mesma que 2, JSON Formatted
{{{foo: "bar", baz: 23} | json}} // Resultado: {"foo": "bar", "baz": 23}NOTA: O BZA não tem cotações duplas antes da formatação e é convertida em dados JSON após a formatação.
3. Formatação de data
MySQL Timestamp ng-Bind = "Message.time * 1000 | Data: 'AAAA-MM-DD'"
{{1304375948024 | Data: 'Medium'}} // 03 de maio de 2011 06:39:08 {{1304375948024 | Data}} // Resultado: 3 de maio de 2011 {{1304375948024 | Data: "mm/dd/yyyy @ h: mma"}} // Resultado: 05/03/2011 às 6:39 {{1304375948024 | Data: "AAAA-MM-DD HH: MM: SS"}} // Resultado: 2011-05-03 06:39:084. Formatação do número
{{1.234567 | Número: 1}} // Resultado: 1.2 {{1234567 | número}} // Resultado: 1.234.5675. Formatação de moeda
{{250 | Moeda}} // Resultado: $ 250,00 {{250 | moeda: "rMb ￥"}} // resultado: rMB ￥ 250,006. A pesquisa de filtro só pode verificar o valor, não a chave
{{[{"Age": 20, "ID": 10, "Nome": "iPhone"}, {"Age": 12, "Id": 11, "Name": "Sunm xing"}, {"AGE": 44, "ID": 12, "Nome": "Test ABC"}] | filtro: 's'}} // Encontre linhas com s // o resultado do exemplo acima: [{"Age": 12, "Id": 11, "Name": "Sunm xing"}, {"Age": 44, "ID": "Nome": "teste"} {{{{"idade": 20, "Id": "": "Nome": "Test"}} {{[{"idade", "20," ":" Id ":" ":" Nome ":" Test "} {{{{" idade "," 20, "Id": "": "Nome": "Test"} {{{{"idade", "20," Id ":" ":" Nome ":" Test "}} {{[{" idade "," 20, "": "Nome": " 12, "ID": 11, "Nome": "Sunm Xing"}, {"Age": 44, "ID": 12, "Nome": "Test ABC"}] | filtro: {'nome': 'ip'}}} // Encontre a linha de nome como ip // o resultado do exemplo acima: [{"idade": 20, "id": 10, "nome": "iphone"}] $ filtro ('número') (30000, 2); var jSonstring = $ filter ('json') ({"idade": 12, "id": 11, "name": "Sunm xing"}, {"idade": 44, "id": 12, "nome": "teste abc"}]))7. String de limitto, interceptação de objeto
{{"I Love Tank" | Limitto: 6}} // resultado: eu amo {{"eu amo tank" | Limitto: -4}} // Resultado: Tank {{[{"Age": 20, "ID": 10, "Nome": "iPhone"}, {"Age": 12, "Id": 11, "Nome": "Sunm Xing"}, {"Age": 44, Id ": 12," Nome ":" ":" Test "}, {" Age ": 44, Id": 12, "Nome": "": Limitto: 1}} // Resultado: [{"Age": 20, "ID": 10, "Nome": "iPhone"}]8. OrdemBy Object Classing
{{[{"Age": 20, "ID": 10, "Nome": "iPhone"}, {"Age": 12, "Id": 11, "Name": "Sunm xing"}, {"AGE": 44, "ID": 12, "Nome": "Test ABC"}] | orderBy:'id':true }} // Root id descending order {{ [{"age": 20,"id": 10,"name": "iphone"}, {"age": 12,"id": 11,"name": "sunm xing"}, {"age": 44,"id": 12,"name": "test abc"} ] | Ordemby: 'id'}} // classificado {{[{"Age": 20, "ID": 10, "Nome": "iPhone"}, {"Age": 12, "Id": 11, "Nome": "Sunm Xing"}, {"Age": 44, Id ": 12, Nome": ":" Test "}, {" Age ": 44," Id ": 12, Nome": "": "" ordem: ['-idade', 'nome']}}2. Função de filtro personalizada
O método de personalização do filtro também é muito simples. Use o método de filtro do módulo para retornar uma função que recebe o valor de entrada e retorna o resultado processado.
App.Filter ('Nome do filtro', function () {Função de retorno (objeto que precisa ser filtrado, parâmetro 1 do filtro, parâmetro de filtro 2, ...) {//... Algumas coisas retornam o objeto processado;}});Encontrei uma estrutura básica de MVC AngularJS, Phonecat e Filter Custom, que também é escrito nessa base. Essa estrutura é muito útil.
filters.js Adicionar um módulo
angular.module ('tanktest', []). filtro ('tankLeplace', function () {return function (input) {return input.replace (/tank/, "======")};});Chamado em html
{{"Tank é bom" | minúsculo | tankplplace}} // resultado: ===== é bomNota: | minúsculo | Os comandos de pipeline de tanquesplace podem ter múltiplos
yourApp.Filter ('OrderObjectby', function () {Return function (itens, campo, reverso) {var filterled = []; angular.foreach (itens, function (item) {filtroud.push (item);}); filtragem.Sort (function (a, b) {return (a [campo]> b [campo]? };Este filtro converte o objeto em uma matriz padrão e o classifica pelos campos que você especificar. Você pode usar o filtro OrderObjectby para se parecer com o pedido, incluindo um valor booleano após o nome do campo, na ordem especificada, se ele deve ser revertido. Em outras palavras, o falso é a ordem ascendente, o verdadeiro declínio. Chamada HTML
<li ng-repeat = "Item em itens | OrderObjectby: 'color': true"> {{item.color}} </li>Classificar pesquisa
<input type = "text" ng-model = "search" placeholder = "search"> <Thead> <tr> <!-ng-class = "{DropUp: true}"-> <th ng-click = "changeOrder ('id')" ng-class = "{DropUp: Order == '' '}"> Product <pan) ng. 'id'} "> </span> </th> <th ng-click =" changeOrder ('name') "ng-class =" {DropUp: Order === ''} "> Nome do produto <span ng-class =" {Ordercolor: ngick === 'name'} "> </span> </th> Ordem === ''} "> Preço do produto <span ng-class =" {OrderColor: OrderType === 'Price'} "> </span> </th> </tr> </sead> <tbody> <ttr ng-repeat =" Item no productATA | <td> {{item.name}} </td> <td> {{item.price | moeda: '￥'}} </td> </tr> </tbody>AngularJS
// campo de classificação padrão $ scope.orderType = 'id'; $ scope.order = '-'; $ scope.ChangeOrder = function (type) {console.log (tipo); $ scope.OrderType = tipo; if ($ scope.order === '') {$ scope.order = '-'; } else {$ scope.order = ''; }}