Micro App Angular numéro 8 : GestEmployés

Introduction:gest


 Jour 1 : 2h30 de code

Une micro appli Angular d’entrainement, pour travailler le filtrage en AngularJs.

Il s’agit d’une application de gestion de personnel, tout en temps réel.

On voit les statistiques se modifier en temps réel.

J’avais un peu assez des 2 autres applications parcequ’il y avait des maladresses dedans, alors je fais celle là un peu.

Cliquer ici pour la tester.

Plus du tout de Sql ni d’accès Bdd, c’est comme du Big Data, là je sauvegarde le modèle dans le navigateur avec WebStorage, mais je pourrais stocker le modèle sur mongoDb. Faut avouer que c’est assez simple. à ce stade.

Jour 2 : 3h30 de code

Finalement, j’ai bien re-travaillé le fonctionnement des filtres et en fait, c’est assez simple à la base de faire un filtre :

ETAPE  1 :Dans la vue, créer un Select qui va contenir le critère du filtre, exemple :


<select class="selectionner" data-ng-model="filtreCsp" ng-options="opt.csp as opt.csp for opt in personnes| unique:'csp'" >
 <option value="">Catégorie ...</option>
 </select>

Dans ce cas, je parcours le modèle personnes, à la recherche de toutes les CSP(catégories socio-professionelles), et j’ajoute un UNIQUE pour spécifier qu’il ne faut pas de doublons (un peu comme en sql)

ETAPE 2 :Ensuite, dans le ng-repeat, j’ajoute tout simplement ceci: filter:filtreCsp comme cela :


<tr ng-repeat="personne in personnes |filter:filtreCsp " >

Du coup, le filtre fonctionne automatiquement ! Il y a d’autres types de filtres que l’on peut faire autrement , lorsque le filtre est compliqué du style choisir le personnel entre 20 et 40 ans, il faut alors créer une fonction qui retourne le résultat., j’expliquerais plus tard comment faire.

pas eu le temps de mettre la fenêtre modale Bootstrap pour le picking de photos

Lire la suite

Publicités