1
votes

Comment afficher l'élément div si la case est cochée?

J'essaye d'afficher un élément div si une case est cochée à l'aide de ng-show. Si l'utilisateur n'a pas de numéro de téléphone, il coche la case et un élément d'entrée doit apparaître où il peut saisir son adresse postale. Cependant, basculer entre les valeurs cochées et non cochées n'a aucun effet pour le moment.

J'ai effectué une liaison bidirectionnelle sur l'élément.

- Mon fichier component.html -

XXX

- Fichier Person.ts -

export class Person {

        constructor(
            public myCheckbox: boolean
        ) {  }
    }

javascript angular

2 commentaires

Copie possible de Quel est l'équivalent de ngShow et ngHide in Angulaire?

@Lemmy merci pour ça! M'a aidé

3 Réponses :

2
votes

Bienvenue dans la communauté.

ng-show est une directive du framework angularJS.

Dans Angular (notez le majuscule 'A'), nous utilisons la directive ngIf comme ceci: p >

<div *ngIf="person.myCheckbox">

0 commentaires

1
votes

Avec angular, vous devez utiliser ngIF

<input type="checkbox" name="myCheckbox" [(ngModel)]="person.myCheckbox">
I don't have a telephone
<div>
   Show when checked (telephone input)
</div>

Mais vous pouvez le faire simplement avec du CSS.

[name="myCheckbox"] + div {
  display: none;
}

[name="myCheckbox"]:checked + div {
  display: block;
}

<div *ngIf="person.myCheckbox">

2 commentaires

@Pete Je l'obtiens tout le temps avec un projet React ..... "Ce n'est pas comme ça que vous le faites dans React ...." mais je le fais avec CSS depuis des années, alors ajoutons une surcharge JavaScript quand CSS peut fait tout. :)

très apprécié de m'avoir montré une façon différente de procéder! @epascarello

0
votes

Il vous suffit d'utiliser la directive * ngIf .

- Votre fichier component.html -

export class Person {
    constructor(
        public myCheckbox: boolean
    ) {  }
}

- Personne Fichier .ts -

<input type="checkbox" name="myCheckbox" [(ngModel)]="person.myCheckbox">
I don't have a telephone
<div *ngIf="person.myCheckbox">
   Show when checked (telephone input)
</div>

0 commentaires