Discussion :

[alejandro]

Bonjour,

Je développe actuellement une application de cartographie sous AngularJS.

J'ai trois zones distinctes :

* Une carte Google Map avec des polygones représentant des départements
* Un formulaire reprenant la liste de mes départements
* Un panier reprenant la liste des départements sélectionnés

J'aurais besoin d'un conseil sur la façon dont je dois organiser mon code pour tout relier ensemble :

* Lorsque je clique sur un département ça doit me le colorer en vert, me le sélectionner dans mon formulaire et me le rajouter dans mon panier
* Lorsque je reclique sur le même département ça doit me le colorer en rouge, me le désélectionner dans mon formulaire et me le supprimer du panier
* Lorsque je sélectionne un département dans mon formulaire ça doit me le colorer en vert sur ma carte et me le rajouter dans mon panier
* Lorsque je désélectionne le département dans mon formulaire ça doit me le colorer en rouge sur ma carte et me le supprimer de mon panier
* Lorsque je supprime un département dans mon panier ça doit me le colorer en rouge sur ma carte et me le désélectionner dans mon formulaire.

J'ai vu qu'il fallait utiliser du data binding mais je n'arrive pas à voir comment m'y prendre pour relier ma carte, mon formulaire et mon panier.

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

Je ne demande pas que l'on code à ma place, juste que l'on m'explique comment m'y prendre avec les outils qu'angular met à ma disposition.

Pour l'instant j'ai créé :

* une directive pour afficher ma carte (ça fonctionne)
* un controller relié à mon menu général pour afficher mes départements et les rendre cliquables (ça fonctionne aussi)
* une zone formulaire HTML où je souhaiterais proposer de sélectionner les départements à partir de celui-ci (ça ne marche pas)
* une zone panier HTML où je souhaiterais afficher un récapitulatif des départements que j'ai sélectionnés sur ma carte ou dans mon formulaire (ça ne marche pas)

Quelqu'un pourrait-il me mettre sur la voie pour relier tout ça ensemble ?

Merci d'avance

[Invité]

Personnellement, j'irais sur cette piste en Angular 1.5:

Soit $scope.departementsSelectionnes un tableau d'objets Json qui ressemble à ça, dans ton controleur :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
$scope.departementsSelectionnes  = [
{"departement":75},
{"departement":95},
{"departement":12}
]

Alors, quand tu cliques sur un departement, ça doit exécuter la fonction suivante qui ajoute au tableau Json le departement sélectionné :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
$scope.ajouterDepartement = function (departementChoisiDansLaVue){
                      $scope.departementsSelectionnes.push({"departement":departementChoisiDansLaVue});
}

De même si tu recliques pour le supprimer du tableau d'objet Json, ça doit exécuter la fonction splice() dans ton contrôleur, mais elle est un peu plus compliquée à faire, parce que il faut retrouver l'objet departement à supprimer en fonction du numéro de departement dans le tableau Json pour le supprimer, mais ça doit être possible, moi j'ai que l'idée d'à la barbare avec une boucle for(C'est pas la bonne pratique, et j'ai pas testé mais ça peut ressembler à ça,mais là ça ne marche peut etre pas, parce que la fonction splice fonctionne pas trop comme ça en fait) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
$scope.supprimerDepartement = function (departementChoisiDansLaVue){
                      var x = 0;
                      for (x=0;x<$scope.departementsSelectionnes.length;x++){
                              if($scope.departementsSelectionnes[x].departement==departementChoisiDansLaVue){
                                          $scope.departementSelectionnes.splice(x,1);
                               }
                       }

[Marco46]

N'utilises surtout pas le scope pour ça, utilise des services. Je vois que la leçon a été retenue par devwebsympa ça fait plaisir de voir que quand on prend du temps pour aider les gens ça sert.

[Invité]

Il est opère en temps réel sur la carte, du coup le $scope me semble approprié.
il stockera après dans son service de data, une fois que l'utilisateur aura choisi l'intégralité de ses départements ... ?

Je suis d'accord que les services, c'est super, mais là, sa carte est modifiée en temps réel, il doit donc stocker les variables Département dans un tableau JSON en temps réel en attendant la fin du choix de l'utilisateur.
Enfin bah moi je ferais comme ça, après je n'ai pas 6 ans d'expérience sur AngularJs1.5(Le meilleur framework JS )! Merci

Ensuite lorsqu'il voudra recharger sa carte avec ses départements sélectionnés, là il écrira une chose de ce style :
$scope.departementsSelectionnes = serviceDepartements.getDepartements();
Et le service ira requêter sur son Back End.

Je suis tout à fait d'accord qu'il faut créer un service, je donnais juste une idée, relative à son problème de temps réel, AngularJs 1.5 excellant dans le traitement en temps réel.

[alejandro]

Bonjour,

Je ne sais pas si j'ai bien fait mais voici comment je m'y suis pris.

J'ai créé un contrôleur que j'ai rattaché à mon formulaire et dans lequel j'ai mis :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
$scope.secteurs_geo = [];
$scope.type_de_secteur = 'Choisir mode découpage';
$rootScope.$on("CallUpdateSecteursGeo", function(event, titre, secteurs){
    $scope.type_de_secteur = titre;
    $scope.secteurs_geo = secteurs;
});

Dans mon autre contrôleur je clique sur un menu afin de charger les départements :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$rootScope.$emit("CallUpdateSecteursGeo", 'Régions', polygones);

Tout se charge bien et mes checkboxes sont cochées pour les départements qui ont la valeur checked à true :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
options.checked = true;
polygones[polygones.length] = CartoBundleMap.setPolygon(options, 'click', function (event) {
     this.checked = !this.checked;
    ...

Lorsque je vérifie le statut d'un de mes départements j'ai bien le statut de l'option checked :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
angular.element($0).scope().secteurs_geo[0].checked;
true

Lorsque je clique sur un département l'option checked passe bien à false.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
angular.element($0).scope().secteurs_geo[0].checked;
false

Lorsque je coche ou décoche le même département à partir du formulaire, encore une fois le modèle se met à jour correctement :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
angular.element($0).scope().secteurs_geo[0].checked;
true

Par contre ma case ne se coche/décoche jamais toute seule ?
Mon modèle est bien mis à jour mais ma case reste telle qu'elle est apparue au début, c'est à dire soit coché soit décochée mais elle ne change pas ?
J'ai pourtant bien vérifié que ce soit le même objet qui se met à jour et c'est bien le même :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
_.pe {gm_accessors_: Object, latLngs: _.yc, gm_bindings_: Object, strokeColor: "#000000", strokeOpacity: 1…}
$$hashKey
:
"object:5"
S
:
Bg

Je voudrais que ça fonctionne avant d'essayer de passer avec des services mais pour l'instant c'est un peu obscur pour moi.

Pouvez-vous m'aider svp ?

Edit : Ha oui j'ai quand même oublié le plus important :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<li ng-repeat="c in secteurs_geo"><a href="#"><input type="checkbox" ng-model="c.checked"> {[{c.name}]}</a></li>

Ce que je ne comprends pas c'est que si je fais :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
> angular.element($0).scope().secteurs_geo[0].checked;
<. false

Et si je le met à jour :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
> angular.element($0).scope().secteurs_geo[0].checked = true
<. true

Ma case ne se coche pas quand même ?

[alejandro]

Bonjour,

Je clos la discussion car j'ai trouvé pourquoi ça ne marchait pas.

Donc d'abord merci pour votre aide, j'ai réorganisé mon application comme indiqué, c'est à dire en mettant mes données dans des services que je peux utiliser un peu partout à travers mon application, c'est plus facile.

En fait mes polygones sur ma carte étaient bien observés par mon contrôleur mais celui-ci n'était pas notifié de leur changement d'état car ils étaient en dehors du scope. J'ai dû rajouter à ma fonction de rappel :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$scope.$apply();

A partir de là tout fonctionne à merveille.

En espérant que ça pourra aider quiconque tomberait sur ce post avec un problème similaire.