IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Angular Discussion :

Afficher une <td> (cachée)


Sujet :

Angular

  1. #1
    Membre actif
    Homme Profil pro
    Ressources humaines
    Inscrit en
    septembre 2009
    Messages
    422
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Doubs (Franche Comté)

    Informations professionnelles :
    Activité : Ressources humaines

    Informations forums :
    Inscription : septembre 2009
    Messages : 422
    Points : 212
    Points
    212
    Par défaut Afficher une <td> (cachée)
    Bonjour,

    Voici un tableau HTML avec des données, lorsque l'utilisateur clique sur un nombre qui se situe dans les cellules grisées (donc pour cette exemple 32 ou 47). Un second tableau devrait s'afficher avec deux colonnes.



    Comment je pourrais faire ça avec Angular ? Sur Stackblitz, j'ai juste su crée le tableau HTML. Je bloque carrément là.

    https://stackblitz.com/edit/angular-...component.html

    Si vous avez une idée je suis intéressé.

    Un grand merci

  2. #2
    Membre éprouvé
    Homme Profil pro
    Développeur Web
    Inscrit en
    janvier 2019
    Messages
    662
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : janvier 2019
    Messages : 662
    Points : 952
    Points
    952
    Par défaut
    ou doit s'afficher le tableau ?

  3. #3
    Membre actif
    Homme Profil pro
    Ressources humaines
    Inscrit en
    septembre 2009
    Messages
    422
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Doubs (Franche Comté)

    Informations professionnelles :
    Activité : Ressources humaines

    Informations forums :
    Inscription : septembre 2009
    Messages : 422
    Points : 212
    Points
    212
    Par défaut
    Le second tableau doit s'afficher sur les cellules grisées. Donc si tu cliques par exemple sur 32, un tableau doit apparaître avec 2 colonnes par exemple nom et prénom. Je ne sais pas si c'est clair?

  4. #4
    Membre actif
    Homme Profil pro
    Ressources humaines
    Inscrit en
    septembre 2009
    Messages
    422
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Doubs (Franche Comté)

    Informations professionnelles :
    Activité : Ressources humaines

    Informations forums :
    Inscription : septembre 2009
    Messages : 422
    Points : 212
    Points
    212
    Par défaut
    Bonjour,

    J'ai amélioré mon ancien code, lorsque je clique sur 32 j'affiche bien un nouveau tableau, sauf qu'il est tout en bas. J'aimerai juste qu'il soit en dessus de la première ligne.



    Si vous avez une idée, je suis preneur, le lien Stackblitz est toujours le même mais le voici au cas où.

    https://stackblitz.com/edit/angular-...component.html

  5. #5
    Membre émérite
    Avatar de dukoid
    Homme Profil pro
    Développeur informatique
    Inscrit en
    novembre 2012
    Messages
    2 031
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : novembre 2012
    Messages : 2 031
    Points : 2 887
    Points
    2 887
    Par défaut
    plusieurs façons :

    (1)

    toggle(1)
    *ngIf="selectedArr[1]

    1 est un indice, il sera unique et diffèrent pour chaque case

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
        <td scope="col" style="width: 12%; background-color: #dee2e657;">
          <button (click)="toggle(1)" id="bt">{{ 32 }}</button>
          <ng-container
            *ngIf="selectedArr[1]"
            [ngTemplateOutlet]="identityTpl"
            [ngTemplateOutletContext]="{ name: 'toto', firstname: 'joe' }"
          >
          </ng-container>
        </td>
     
    ...
    ...
    <ng-template #identityTpl let-name="name" let-firstname="firstname">
      {{ name }} / {{ firstname }}
    </ng-template>


    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    ...
      selectedArr = <boolean[]>[];
    ...
      toggle(indice: number) {
        this.selectedArr [indice] = !this.selectedArr [indice];
      }


    (2) créer un composant app.identity.ts :

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    <td scope="col" style="width: 12%; background-color: #dee2e657;">
          <button (click)="toggle(1)" id="bt">{{ 32 }}</button>
           <app-identity *ngIf="selectedArr[1]" [name]="name" [firstName]="firstName"></app-identity>
    </td>
    (3)
    avec une directive...

    par code en fonction de la condition, tu ajoutes ou pas le DOM du tableau à l'emplacement de la directive

  6. #6
    Membre actif
    Homme Profil pro
    Ressources humaines
    Inscrit en
    septembre 2009
    Messages
    422
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Doubs (Franche Comté)

    Informations professionnelles :
    Activité : Ressources humaines

    Informations forums :
    Inscription : septembre 2009
    Messages : 422
    Points : 212
    Points
    212
    Par défaut
    Bonjour dukoid,

    Merci d'avoir consacré ton temps à mon problème. Je viens de résoudre mon souci encore merci.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [XL-2010] Code VBA afficher une feuille cachée quand on clic dans une cellule
    Par phiphi27700 dans le forum Macros et VBA Excel
    Réponses: 5
    Dernier message: 06/04/2019, 15h48
  2. [AC-2016] Afficher les champs cachés d'une zone de liste déroulante
    Par vavavoum74 dans le forum IHM
    Réponses: 3
    Dernier message: 08/01/2019, 14h28
  3. [XL-2016] Afficher des lignes cachées en cliquant dans une cellule
    Par yolojo dans le forum Macros et VBA Excel
    Réponses: 3
    Dernier message: 06/12/2017, 12h46
  4. afficher une fenetre deja ouverte et cachée dans la barre des taches
    Par riyad25h dans le forum Agents de placement/Fenêtres
    Réponses: 4
    Dernier message: 06/12/2016, 16h19
  5. [AC-97] Récupérer valeur affichée et valeur cachée d'un champ d'une combobox
    Par BornToBe dans le forum VBA Access
    Réponses: 7
    Dernier message: 08/05/2012, 16h06

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo