AngularJS Masquer/Afficher tous les éléments

Fermé
Cybermate Messages postés 222 Date d'inscription samedi 25 juillet 2015 Statut Membre Dernière intervention 27 octobre 2018 - Modifié le 27 oct. 2018 à 18:15
Bonjour,

je débute tout juste sur AngularJS et je rencontre un problème avec mon premier petit projet.

J'ai globalement un tableau, composé de trois lignes, lorsque l'on clique sur une des lignes cela révèle un sous-tableau initialement caché. Lorsque l'on clique à nouveau sur une ligne cela le masque. J'ai souhaité en plus ajouter un bouton qui masquerait/afficherait tous les éléments.

Voici mon code HTML (simplifié un maximum)


<button ng-bind="allExpanded" ng-click="toggle(allExpanded)">Tout afficher/masquer<button>
<table>
<tbody>
<tr ng-click="expanded_1 =! expanded_1">
<table ng-show="expanded_1">
<!--CONTENT-->
</table>
</tr>
<tr ng-click="expanded_2 =! expanded_2">
<table ng-show="expanded_2">
<!--CONTENT-->
</table>
</tr>
<tr ng-click="expanded_3 =! expanded_3">
<table ng-show="expanded_3">
<!--CONTENT-->
</table>
</tr>
</tbody>
</table>



Voici le code JS :


$scope.toggle = function (expanded) {
// set all to true or false
$scope.expanded_1 = expanded;
$scope.expanded_2 = expanded;
$scope.expanded_3 = expanded;
};



En soit ce code fonctionne, jusqu'à que j'ouvre/ferme en cliquant sur une ligne. Le bouton n'a ensuite plus d'effet sur les lignes que j'ai ouvertes moi-même.

Avez-vous une idée??


Vous remerciant d'avance,


Cordialement,