web-dev-qa-db-fra.com

Angular2 - Afficher / Masquer la section sur la sélection du bouton radio

Je dois afficher ou masquer des sections en fonction de la sélection du bouton radio

 <input name="options"  [(ngModel)]="options" type="radio" [value]="true" [checked]="options==true"/> Yes

    <input name="options"[(ngModel)]="options" type="radio" [value]="false" [checked]="options==false"/> No</label>

<div>
      <h2 ng-show="options == 'true'">Supply</h2>
      <h2 ng-show="options == 'false'">Demand</h2>
</div>

Si l'utilisateur clique sur Oui, nous devons afficher "Approvisionnement" et masquer "Demande". Si l'utilisateur clique sur Non, nous devons afficher "Demande" et masquer "Approvisionnement".

Mais maintenant, lors du chargement du formulaire lui-même, l'offre et la demande s'affichent à l'écran.

angularradio-buttonprimeng
10
Jan69

Dans Angular il peut être réalisé avec * ngIf:

 <input name="options"  [(ngModel)]="options" type="radio" [value]="true" [checked]="options"/> Yes

 <input name="options"[(ngModel)]="options" type="radio" [value]="false" [checked]="!options"/> No

 <h2 *ngIf="options">Supply</h2>
 <h2 *ngIf="!options">Demand</h2>

Et pas besoin de vérifier si option==true ou false, [checked]="options" et [checked]="!options" faire de même.

19
Vega
<div>
            <div class="radio">
                <label><input type="radio" [(ngModel)]="model.prop" name="prop" value="A">A</label>
            </div>
            <div class="radio">
                <label><input type="radio" [(ngModel)]="model.prop" name="prop" value="B">B</label>
            </div>
            <div class="radio">
                <label><input type="radio" [(ngModel)]="model.prop" name="prop" value="C">C</label>
            </div>
    </div>

<div *ngIf="model.prop === 'A'">A</div>
<div *ngIf="model.prop === 'B'">B</div>
<div *ngIf="model.prop === 'C'">C</div>

si vous souhaitez présélectionner le type de valeur, tapez

 model.prop = 'A';

dans votre fichier .ts

2
Girish