Entrando no AngularJs e explicando o filtro (filter) em detalhes

O filtro (filtro), como o nome sugere, tem a função de receber uma entrada, processá-la por alguma regra e retornar o resultado processado. É usado principalmente na formatação de dados, como obter um subconjunto de um array, ordenar elementos dentro de um array, etc. O ng inclui alguns filtros, eles são: currency (moeda), date (data), filter (匹配子串), json (formatação de objeto json), limitTo (limitar quantidade), lowercase (minúsculas), uppercase (maiúsculas), number (número), orderBy (ordenar). Ao todo, há nove. Além disso, é possível criar filtros personalizados, isso é poderoso, pode atender a qualquer exigência de processamento de dados.

O conteúdo do filtro é muito simples, basta entender como usar os filtros internos e como definir seu próprio filtro. Hoje aprendi muito sobre isso, vamos fazer uma introdução.

Dois métodos de uso do filtro

1. No uso de filtros em templates

Podemos usar o filtro diretamente dentro de {{}}, seguindo a expressão com | para separá-los, a sintaxe é a seguinte:

{{ expressão | filtro }}

também pode usar vários filtros juntos, a saída do filtro anterior será usada como entrada do próximo filtro (não à toa que parece tanto com o pipe...)

{{ expressão | filtro1 | filter2 | ... }}

Os filtros podem aceitar parâmetros, os parâmetros são separados por :, por exemplo:

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

Além de formatar os dados dentro de {{}}, também podemos usar filtros nas diretivas, por exemplo, antes de filtrar o array array, e então repetir a saída:

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

2. No controller e no service, usar filter

Também podemos usar filtros no nosso código JavaScript, a maneira é a injeção de dependência que conhecemos, por exemplo, se eu quiser usar o filtro currency no controller, basta injetá-lo no controller, o código é o seguinte:

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

Você pode usar {{num}} no template para output diretamente $123,534Agora, no serviço, usar filter também é o mesmo sentido.

Pode estar em dúvida, se eu quiser usar vários filtros no controller, tenho que injetá-los um a um, isso não seria muito trabalhoso? Não se preocupe, o ng oferece um serviço $filter para chamar os filtros necessários, você só precisa injetar $filter, a sintaxe é a seguinte:

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

Isso pode alcançar o mesmo efeito. A vantagem é que você pode usar diferentes filtros com mais facilidade.

Filtros internos do ng

O ng inclui nove filtros internos, que são muito fáceis de usar, você pode entender lendo o documento. No entanto, para não ter que consultar o documento no futuro, aqui está uma registro detalhado.

1. currency (tratamento de moeda)

Você pode usar currency para formatar números como moeda, o símbolo padrão é o dólar, você pode passar o símbolo desejado, por exemplo, eu passo o yuan:

{{num | currency : '￥'}}

2. date (formatação de data)

A capacidade de formatação de datas do JavaScript nativo é limitada, o filtro de date do ng pode atender basicamente às necessidades de formatação gerais. A sintaxe é a seguinte:

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

o parâmetro é usado para especificar o formato desejado, y M d h m s E representa ano mês dia hora minuto segundo dia da semana, você pode combiná-los livremente. Você também pode usar diferentes quantidades para limitar o número de dígitos formatados. Além disso, o parâmetro pode usar strings descritivas específicas, por exemplo, 'shortTime' formatará o tempo como12:05 tais como pm. O ng oferece oito strings descritivas, acho que isso é um pouco excessivo, posso combinar conforme a minha vontade para obter o formato desejado, não preciso lembrar dessas palavras~

3.filter(coincidindo com a substring)

Este filtro chamado filter (devo admitir que o nome é confuso - !) é usado para processar um array, então pode filtrar elementos contendo uma substring e retorná-los como um subarray. Pode ser um array de strings ou um array de objetos. Se for um array de objetos, pode coincidir com o valor do atributo. Ele recebe um parâmetro para definir as regras de coincidência da substring. Vou dar um exemplo de uso do parâmetro, usei alguns filhos muito populares agora para definir um array:

$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' }} //coincidindo com o valor do atributo contendo a
{{ childrenArray | filter : 4 }} //coincidindo com o valor do atributo contendo4do
{{ childrenArray | filter : {name : 'i'} }} //o parâmetro é um objeto, coincide com o atributo name contendo i
{{childrenArray | filter : func }} //o parâmetro é uma função, especifica o retorno age>4do

4.json(formatação de objeto JSON)

O filtro JSON pode formatar um objeto JS em uma string JSON, sem parâmetros. O que isso serve, geralmente não escrevo uma string JSON na página, o site diz que pode ser usado para depuração, bom, uma boa escolha. Ou, também pode ser usado no JS, serve da mesma forma que o JSON.stringify() que conhecemos. A forma de usar é super simples:

{{ jsonTest | json}}

5. limitTo(limitar comprimento do array ou string)

O filtro limitTo é usado para truncar arrays ou strings, aceitando um parâmetro para especificar o comprimento de truncagem. Acho que esse filtro é um pouco inútil, pois só pode truncar do início de arrays ou strings,/Realize a truncagem no final, em seguida, a função nativa do js pode substituí-la, vamos ver como usá-la:

{{ childrenArray | limitTo : 2 }} //Vai exibir os dois primeiros itens do array

6. lowercase(minúsculo)

Transforme os dados em minúsculas. Muito simples, não há necessidade de explicar. Também é um filtro um pouco inútil, sem parâmetros, só pode transformar todo o string em minúsculas, não pode especificar letras. Não quero explicar como usá-lo.

7. uppercase(maiúsculo)

Como acima.

8. number(formatar número)

O filtro number pode adicionar milhares de divisões a um número, assim:123,456,789Além disso, ele também aceita um parâmetro para especificar quantas casas decimais devem ser mantidas como float:

{{ num | number : 2 }}

9. orderBy(ordenar)

O filtro orderBy pode classificar os elementos de um array, aceitando um parâmetro para especificar as regras de classificação. O parâmetro pode ser uma string, indicando a classificação pelo nome do atributo. Também pode ser uma função, definindo o atributo de classificação. Pode ser uma array, indicando a classificação em ordem de valor dos atributos (se os valores do primeiro item forem iguais, compare o segundo item), vamos usar o exemplo do array de crianças acima:

<div>{{ childrenArray | orderBy : 'age' }}</div>/div>  //Classifique com base no valor do atributo age, se-Se o valor de age for inversamente proporcional
<div>{{ childrenArray | orderBy : orderFunc }}</div>/div> //Classifique com base no valor de retorno da função
<div>{{ childrenArray | orderBy : ['age','name'] }}</div>/div> //Se o valor de age for o mesmo, classifique conforme o nome

A introdução do filtro integrado está concluída, li até que me adormecesse... Como você pode ver, os filtros integrados do ng também não são onipotentes, na verdade muitos são um pouco inúteis. Para necessidades mais personalizadas, precisamos definir nossos próprios filtros. Vamos ver como podemos criar filtros personalizados.

Filtro personalizado

A maneira de personalizar o filtro é muito simples, use o método filter do módulo, retorne uma função, que recebe o valor de entrada e retorna o resultado processado. Sem mais delongas, vamos escrever um. Por exemplo, eu preciso de um filtro que possa retornar os elementos de índice ímpar de um array, o código é o seguinte:

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;
 };
});

O formato é assim, sua lógica de processamento está escrita na função closure interna. Você também pode permitir que seu filtro receba parâmetros, que são definidos na função return, como o segundo parâmetro, ou mais parâmetros também podem ser.

Essas são as bases básicas do filtro. Mais coisas a aprender ainda precisam ser testadas em projetos reais. Então, antes que o projeto chegue, vamos fortalecer as bases~

Isso é tudo o que há no artigo. Espero que ajude no seu aprendizado e que você apoie fortemente o tutorial Gritar.

Declaração: O conteúdo deste artigo é extraído da Internet, pertence ao respectivo proprietário, foi contribuído e carregado voluntariamente pelos usuários da Internet, o site não possui direitos de propriedade, não foi editado manualmente e não assume responsabilidade por eventuais responsabilidades legais. Se você encontrar conteúdo suspeito de violação de direitos autorais, por favor, envie e-mail para: notice#oldtoolbag.com (ao enviar e-mail, troque # por @ para denunciar e forneça provas. Em caso de verificação, o site deletará imediatamente o conteúdo suspeito de violação de direitos autorais.)