Dans cette étape, vous ajouterez une fonctionnalité qui permet aux utilisateurs de contrôler l'ordre dans lequel la liste des téléphones s'affiche. Le tri dynamique peut être implémenté de cette manière, en ajoutant une nouvelle propriété de modèle, en l'intégrant à l'itérateur, puis en permettant à la liaison de données de faire le reste.
Veuillez réinitialiser le répertoire de travail:
Git Checkout -F Étape-4
Vous devez constater qu'en plus de la zone de recherche, votre application a un menu Down supplémentaire qui permet de contrôler l'ordre de la disposition du téléphone.
Les différences les plus importantes entre l'étape 3 et l'étape 4 sont répertoriées ci-dessous. Vous pouvez voir la différence complète dans GitHub.
modèle
app / index.html
Recherche: <entrée ng-model = "Query"> Trier par: <sélectionner ng-model = "orderprop"> <option value = "name"> alphabetics </ option> <option value = "age"> NOUVEAU </ option> </ select> <ul> <li ng-repeat = {téléphone dans les téléphones | filtre: query | OrderBy: OrderProp "> {{téléphone. <p> {{phone.snippet}} </p> </li> </ul>Nous avons apporté les modifications suivantes dans index.html:
Tout d'abord, nous avons ajouté une balise <lect> appelée OrderProp afin que nos utilisateurs puissent choisir les deux méthodes de tri que nous fournissons.
Ensuite, ajoutez un filtre OrderBy après le filtre du filtre pour traiter les données entrant dans l'itérateur. Le filtre OrderBy prend un tableau en entrée, copie une copie et réorganise la copie et la diffuse à l'itérateur.
AngularJS crée une liaison bidirectionnelle entre l'élément Select et le modèle OrderProp. Ensuite, OrderProp sera utilisé comme entrée dans le filtre OrderBy.
Comme nous l'avons dit lorsque nous avons discuté de la liaison des données et des itérateurs à l'étape 3, peu importe lorsque le modèle de données change (tel que l'utilisateur sélectionne un ordre différent dans le menu déroulant), la liaison des données AngularJS mettra automatiquement à jour la vue. Aucune opération DOM maladroite!
Contrôleur
app / js / contrôlers.js:
Fonction PhonelistCtrl ($ Scope) {$ scope.phones = [{"Name": "Nexus S", "Snippet": "FAST est devenu plus rapide avec Nexus S.", "Age": 0}, {"Name": "Motorola Xoom ™ avec Wi-Fi", "Snippet": "The Next, Generation Tablet", "Age": 1}, "Nom:" Nom: ":" Nom: "Nom:" Nom: "Nom:" Nom: "Nom:" Nom: "Nom:" Nom: "Nom:" Nom: "Nom:" Nom: "Nom:" Nom: "Nom:" Nom: "Nom:" Nom: "Nom:" Nom: "Nom:" Nom: "Nom:" Nom: "Nom" "Motorola xoom ™", "extrait": "La tablette suivante, prochaine génération.", "Age": 2}]; $ scope.orderprop = 'age';}Nous avons modifié le modèle des téléphones - le tableau de téléphonie mobile - ajoutant un attribut d'âge à chaque enregistrement de téléphone mobile. Nous allons trier les téléphones selon l'attribut d'âge.
Nous avons ajouté une ligne au code du contrôleur pour que la valeur par défaut d'OrderProp soit de l'âge. Si nous ne définissons pas la valeur par défaut, ce modèle restera non initialisé tant que nos utilisateurs ne sélectionnent pas une commande dans le menu déroulant.
Nous devrions maintenant parler de la liaison des données bidirectionnelle. Notez que lorsque l'application se charge dans le navigateur, "le plus récent" est sélectionné dans le menu déroulant. En effet, nous avons défini OrderProp sur «l'âge» dans le contrôleur. La liaison fonctionne donc dans la direction de notre modèle à l'interface utilisateur - c'est-à-dire la liaison des données du modèle à la vue. Maintenant, lorsque vous sélectionnez "alphabétiquement" dans le menu déroulant, le modèle de données sera mis à jour en même temps et le tableau de la liste de téléphones sera réorganisé. À l'heure actuelle, la liaison des données prend effet d'une autre direction - c'est-à-dire la liaison des données de la vue au modèle.
test
Les modifications que nous apportons peuvent être vérifiées par un test unitaire ou un test de bout en bout. Regardons d'abord les tests unitaires:
test / unité / contrôlerspec.js:
décrire ('phonecat contrôleurs', function () {décrire ('phoneListctrl', function () {var scope, ctrl; beforeEach (function () {scope = {}, ctrl = nouveau phonelistctrl (scope);}); it ('devrait créer "phones" modèle avec 3 phones', function () {attend (scope.phones. });Les tests unitaires vérifient désormais que la valeur par défaut est définie correctement.
Nous utilisons l'interface de Jasmine pour extraire le contrôleur PhonelistCtrl dans un bloc avant-Endes, qui sera partagé par tous les tests dans tous les blocs parents décrivent.
Exécutez ces tests unitaires, tout comme avant, exécutez le script ./scripts/test.sh, et vous devriez voir la sortie suivante (Remarque: Vous devez ouvrir http: // localhost: 9876 dans votre navigateur et entrez en mode strict avant que le test ne s'exécute!):
Chrome: réinitialisation du coureur ... Total 2 tests (passé: 2; échoue: 0; erreurs: 0) (3,00 ms) Chrome 19.0.1084.36 Mac OS: Exécutez 2 tests (passé: 2; échoue: 0; erreurs 0) (3,00 ms)
Maintenant, nous tournons notre attention vers des tests de bout en bout.
test / e2e / scénarios.js:
... il ('devrait être possible de contrôler l'ordre du téléphone via la boîte de sélection déroulante', function () {// restons-nous pour effectuer l'ensemble de données pour faire les assertions de test courte d'entrée ('Query'). Entrée ('tablette'); attendre (répéteur ('. Phones Li', 'Liste de téléphone'). Column ('Phone.name')). Xoom / u2122 "]); select ('OrderProp'). Option ('Alphabetical'); attendre (répéteur ('. Phones Li', 'List de téléphone'). Column ('Phone.Name')). ToEqual (" Motorola xoom / U2122 "," Motorola xoom / U2122 avec wi-fi "]);}); ...Le test de bout en bout vérifie que le mécanisme de tri de la boîte d'option est correct.
Vous pouvez maintenant actualiser votre navigateur et exécuter à nouveau le test de bout en bout, ou vous pouvez l'exécuter sur le serveur AngularJS.
pratique
Dans le contrôleur PhoneListCtrl, supprimez le réglage de l'instruction OrderProp et vous verrez qu'AngularJS ajoutera temporairement une option vierge dans le menu déroulant, et l'ordre de tri est le tri par défaut (c'est-à-dire non trié).
Ajoutez une liaison `{{OrderProp}} au modèle index.html pour afficher sa valeur en temps réel.
Résumer
Vous avez maintenant fourni des fonctionnalités de recherche pour votre application et l'ont testée en totalité. Étape 5 Nous découvrirons les services d'AngularJS et comment AngularJS utilise l'injection de dépendance.
Ce qui précède est une compilation des informations pour la liaison bidirectionnelle AngularJS. Nous continuerons d'ajouter des informations pertinentes à l'avenir. Merci pour votre soutien pour ce site Web!