Nesta etapa, você aprenderá como criar seu próprio filtro de exibição.
Reinicie o diretório de trabalho:
checkout git -f Etapa 9
Agora vá para uma página de detalhes móveis. Na etapa anterior, a página de detalhes do telefone exibe "verdadeiro" ou "false" para indicar se um telefone tem um recurso específico. Agora usamos um filtro personalizado para representar as seqüências de texto: √ como "verdadeiro"; e × como "falso". Vamos ver como é o código do filtro.
As diferenças mais importantes entre a Etapa 8 e a Etapa 9 estão listadas abaixo. Você pode ver a completa diferença no Github.
Filtros personalizados
Para criar um novo filtro, primeiro crie um módulo PhoneCatFilters e registre o filtro personalizado com este módulo.
app/js/filters.js
angular.module ('PhoneCatFilters', []). filtro ('Marca de seleção', function () {return function (input) {return input? '/u2713': '/u2718';};});Nosso filtro é chamado de marca de seleção. Sua entrada é verdadeira ou falsa, e retornamos dois caracteres unicode ( /u2713 e /u2718) que representam verdadeiro ou falso.
Agora que nosso filtro está pronto, precisamos registrar nosso módulo PhoneCatFilters como uma dependência do nosso módulo principal Phonecat.
app/js/app/js
... angular.module ('Phonecat', ['PhoneCatFilters']) ...modelo
Como nosso código de modelo está gravado no arquivo app/js/filter.js, precisamos introduzir esse arquivo no modelo de layout.
app/index.html
... <script src = "js/controllers.js"> </script> <script src = "js/filters.js"> </script> ...
A sintaxe para o uso de filtros nos modelos AngularJS é:
{{expressão | filtro}}
Aplicamos o filtro no modelo de detalhes do telefone:
App/parcials/telefone-detail.html
... <DL> <dt> Infravermelho </dt> <dd> {{Phone.Connectivity.Infraad | Marca de seleção}} </dd> <dt> gps </dt> <dd> {{phone.connectivity.gps | Marca de seleção}} </dd> </dl> ...teste
Os filtros, como outros componentes, devem ser testados, e esses testes são realmente fáceis de concluir.
teste/unidade/filterspec.js
Descreva ('filtro', function () {antes e cada vez ('PhoneCatFilters')); descrever ('Marcar', function () {it ('deve converter valores booleanos para unicode Mark ou Cross', inject (function (checkmarkfilter) {espera (checkFilter (true). espera (CheckFilter (false). });Observe que, antes de executar todos os testes de filtro, você precisa configurar nosso injetor de teste para o módulo PhoneCatFilters.
Execute ./scripts/test/sh para executar o teste, e você deve ver a seguinte saída:
Chrome: Redefinição do corredor ...... Total 4 testes (aprovados: 4; falha: 0; erros: 0) (3,00 ms) Chrome 19.0.1084.36 Mac OS: Execute 4 testes (aprovado: 4; falha: 0; erros 0) (3,00 ms)
Agora vamos praticar o filtro AngularJS embutido e adicionar as seguintes ligações ao index.html:
Também podemos usar uma caixa de entrada para criar um modelo e combiná -lo com uma ligação filtrada. Adicione o seguinte código ao index.html:
<input ng-model = "userInput"> uppercased: {{userInput | Uppercase}}
Resumir
Agora que você sabe como escrever e testar um plug -in personalizado, na Etapa 10, aprenderemos como continuar enriquecendo a página de detalhes do celular com o AngularJS.
O acima exposto é uma compilação das informações sobre o filtro AngularJS. Continuaremos a adicionar informações relevantes no futuro. Obrigado pelo seu apoio a este site!