Filtrer des données avec AngularJS

Voici maintenant le temps réaliser un petit exercice simple qui mettra en vedette un contrôleur, une vue et quelques directives AngularJS.

Récits utilisateurs (user story) à réaliser

En tant que gestionnaire, je veux afficher la liste des projets à compléter.

En tant que gestionnaire, je veux rechercher un projet dans la liste.

Pour réaliser le premier récit, la première étape est de mettre en place une structure qui permettra d’entreposer les données de nos projets. Je vous propose d’utiliser un tableau d’objets JSON.

Ajoutons cette structure dans un nouveau contrôleur. Ce contrôleur nécessite l’objet $scope qui nous permettra de partager des données avec la vue. L’injection de dépendance est donc utilisé. Pour créer un nouveau contrôleur facilement, référez à la documentation de votre générateur.

La vue correspondante est aussi simple que :

Passons au prochain récit utilisateur.

En tant que gestionnaire, je veux rechercher un projet dans la liste.

Afin de réaliser ce récit, quelques modifications doivent être apportées au code précédent.

  • Un champ texte sera ajouté.
  • Ce champ texte doit utiliser la directive ng-model. Cela nous permettra une association bidirectionnelle (binding) entre une variable du $scope et du contenu du champ texte.
  • Finalement, un filtre est ajouté à notre directive ng-repeat. Ce filtre est basé sur le contenu de notre champ de texte.

Le formulaire et son champ sont ajoutés à la vue.

Conclusion

  • La communication entre la vue et le contrôleur est réalisée grâce au $scope.
  • L’objet $scope est injecté dans le contrôleur par AngularJS grâce au principe d’injection de dépendance.
  • Une association (binding) est réalisée entre une variable $scope et un élément graphique grâce à ng-model.
  • {{}} et ng-bind sont équivalents.
  • Il est possible d’itérer sur un tableau grâce à la directive ng-repeat.
    Un filtre peut-être appliqué à ng-repeat avec la syntaxe  » | filter:expression « .

Nouveau récit utilisateur à réaliser

En tant que gestionnaire, je veux visualiser les informations complètes (nom, date-début, date-fin, responsable et progrès) lorsque je clique sur un item. Le projet sélectionné sera affiché à droite du moteur de recherche dans la même page.

Il serait intéressant d’utiliser la barre de progrès offerte par Boostrap afin de mieux visualiser l’avancement du projet.

Indices pour réaliser le défi :

  • Création d’une nouvelle fonction  afficherProjet(projet) appelée dans la directive ng-click.

Besoin d’un générateur?

Ne pas oublier les fichiers cachés dans l’archive.

Lancer les commandes suivantes pour compléter l’installation.

 

Références AngularJS

ngRepeat

https://docs.angularjs.org/api/ng/directive/ngRepeat

ngModel

https://docs.angularjs.org/api/ng/directive/ngModel

ngBind

https://docs.angularjs.org/api/ng/directive/ngBind

$scope

https://docs.angularjs.org/guide/scope

 

Comments

comments