Discussion :

[philou44300]

Bonjour,
Sur un écran, j'ai une première combo-box chargée avec un appel REST puis une deuxième combo-box dont les valeurs sont chargées avec un autre appel REST et qui sont dépendantes de la valeur choisie dans la première combo-box. Pour les appels REST j'utilise $resource qui est asynchrone. Il y a donc un certain temps avant que la deuxième combo-box se remplisse en fonction de ce qui a été sélectionné dans la première. Si l'utilisateur clique sur la deuxième combo-box pendant le chargement, la liste est vide et il risque de ne pas comprendre que le chargement est toujours en cours.

Je souhaiterais donc indiquer dans la combo que le chargement est en cours avec une animation du genre une barre qui se balade de gauche à droite puis de droite à gauche pendant le chargement afin que l'utilisateur voit que le chargement est en cours. J'ai déjà vu ce genre de chose sur certains sites mais je ne sais plus lesquels.

Mon idée serait d'avoir une variable dans le scope indiquant si oui ou non il faut afficher l'animation de chargement. Lorsque l'utilisateur sélectionne une valeur dans la première combo-box, cette variable est mise à "true". Puis, lorsqu'on a le résultat de la promise (je crois que c'est comme ca que ca s'appelle) et que la fonction exécutée au retour du service REST où je stocke la liste reçue est appelée, je remet la variable à "false" pour indiquer que le chargement est fini.

Avez-vous une idée sur comment faire ca?

Merci d'avance.

[Invité]

Bonjour,

Moi je penserais à un ng-show="montrerMaGifAnime" affecté à la balise ou à la div de l'image GIF ANIME qui est le loader, que tu actives ou désactives dans ton controleur .
En faisant un genre de $scope.montrerMaGifAnime = true; au début de la fonction Rest, puis dans sa fonction de rappel, faire un $scope.montrerMaGifAnime = false;


Sinon j'ai ça , un interceptor qui affiche une image lors de chaque appels ajax, ça a grave bien marché pour moi:

https://nicolashcodes.wordpress.com/...n-loader-ajax/

[philou44300]

Merci pour le retour.

J'ai trouvé un moyen simple et qui me convient. J'ai un gif de chargement qui est mis en backgroung de la combo-box le temps du chargement. J'ai en fait déclaré 2 combo-box qui sont affichées ou non en fonction de ng-show. La première combo-box est celle avec le backgroung de chargement et la deuxième celle où seront les données. Lorsque le chargement des données est lancé, un booléen est mis à true puis passé à false à la fin du chargement.

Voici un exemple de mon code coté html:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<style>
	#myListWait {
		position: relative;
		background: url(img/loading-list.gif) no-repeat right #ddd;
		background-size: 100% 100%;
	}
</style>
<select ng-show="displayWaitForMyOption" class="form-control" name="myListWait" id="myListWait" disabled="disabled">
	<option value="">MyOption</option>
</select>
<select ng-show="!displayWaitForMyOption" class="form-control" name="myList" id="myList"
ng-model="form.mylist" ng-options="option.name for option in listOptions" ng-change="validateLine(form)">
	<option value="">MyOption</option>
</select>

Voici un exemple du code coté angularJS:

Code :

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

1
2
3
4
5
6
7
8
9
10
 
	scope.displayWaitForMyOption = true;
 
	OptionsList.query({
		...
	}, function (options) {
		$scope.listOptions = options;
 
		$scope.displayWaitForMyOption = false;
	});