Dans cette étape, vous apprendrez à créer votre propre filtre d'affichage.
Veuillez réinitialiser le répertoire de travail:
Git Checkout -F Étape 9
Accédez maintenant à une page de détails mobiles. Dans l'étape précédente, la page des détails du téléphone s'affiche "True" ou "False" pour indiquer si un téléphone a une fonctionnalité spécifique. Maintenant, nous utilisons un filtre personnalisé pour représenter les chaînes de texte: √ comme «vrai»; et × comme «faux». Voyons à quoi ressemble le code filtre.
Les différences les plus importantes entre l'étape 8 et l'étape 9 sont répertoriées ci-dessous. Vous pouvez voir la différence complète dans GitHub.
Filtres personnalisés
Pour créer un nouveau filtre, créez d'abord un module PhonecatFilters et enregistrez le filtre personnalisé avec ce module.
app / js / filters.js
angular.module ('phoneCatFilters', []). Filter ('cochen', function () {return function (input) {return input? '/ u2713': '/ u2718';};});Notre filtre est nommé coche. Son entrée est vraie ou fausse, et nous retournons deux caractères Unicode (/ u2713 et / u2718) qui représentent True ou Faux.
Maintenant que notre filtre est prêt, nous devons enregistrer notre module Phonecatfilters en tant que dépendance à notre phonecat de module principal.
app / js / app / js
... angular.module ('phonecat', ['phonecatfilters']) ...modèle
Étant donné que notre code de modèle est écrit dans le fichier app / js / filter.js, nous devons introduire ce fichier dans le modèle de mise en page.
app / index.html
... <script src = "js / contrôlers.js"> </ script> <script src = "js / filters.js"> </ script> ...
La syntaxe pour l'utilisation des filtres dans les modèles angularjs est:
{{Expression | filtre}}
Nous appliquons le filtre au modèle des détails du téléphone:
application / partiels / téléphone-detail.html
... <dl> <dt> infrarouge </dt> <dd> {{phone.connectivity.infrared | Vérifiez}} </dd> <dt> gps </dt> <dd> {{phone.connectivity.gps | Vérifiez}} </dd> </dl> ...test
Les filtres, comme les autres composants, doivent être testés, et ces tests sont en fait faciles à compléter.
test / unité / filterspec.js
décrire ('filter', function () {beforeEach (module ('phonecatFilters')); décrire ('cocher', function () {it ('devrait convertir les valeurs booléennes en uncode cochenmark ou cross', inject (function (wachmarkFilter) {attendre (checkmarkFilter (true)). tobe ('/ u2713'); attendre (checkmarkFilter (false). Tobe ('/ u2718');});}); });Notez qu'avant d'effectuer des tests de filtre, vous devez configurer notre injecteur de test pour le module PhonecatFilters.
Exécuter ./scripts/test/sh pour exécuter le test, et vous devriez voir la sortie suivante:
Chrome: Runner Reset ...... Total 4 tests (passé: 4; échoue: 0; Erreurs: 0) (3,00 ms) Chrome 19.0.1084.36 Mac OS: Exécutez 4 tests (passé: 4; échoue: 0; erreurs 0) (3,00 ms)
Maintenant, pratiquons le filtre intégré AngularJS et ajoutons les liaisons suivantes à index.html:
Nous pouvons également utiliser une boîte d'entrée pour créer un modèle et le combiner avec une liaison filtrée. Ajoutez le code suivant à index.html:
<entrée ng-model = "userInput"> Upperationd: {{userInput | majuscule}}
Résumer
Maintenant que vous savez écrire et tester un plugin personnalisé, à l'étape 10, nous apprendrons à continuer à enrichir notre page de détails sur le téléphone mobile avec AngularJS.
Ce qui précède est une compilation des informations sur le filtre AngularJS. Nous continuerons d'ajouter des informations pertinentes à l'avenir. Merci pour votre soutien à ce site!