web-dev-qa-db-fra.com

Comment afficher et masquer une div avec un élément de case à cocher dans Angular2?

J'ai une case à cocher et ce que j'essaie de faire est de masquer la div lorsque cette case est cochée et d'afficher son désélection dans Angular 2.0 beta.

Je sais comment faire cela en 1.2 angulaire avec ce code

<label>
     <input type="checkbox" ng-model="showhidepregnant"/> Pregnant
</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

Code sur la div

<div class="col-md-4 divhidetxtdpatient" ng-hide="showhidemasked">
      <input class="form-control" tabindex="1" id="id_field_specialist" ng-model="id_field_specialist" type="text" ng-blur="savespecialist()" placeholder="maskable"/>
</div>

Merci d'avance.

angularjsangular
6
Kevin Lopez

Fournissez [(ngModel)] pour votre case à cocher et utilisez la même ngModel en utilisant *ngIf pour votre balise div. Voir l'exemple de code ci-dessous.

<label>
   <input type="checkbox" [(ngModel)]="showhidepregnant"/> Pregnant
</label>

Ensuite, utilisez le même mode:

<div class="col-md-4 divhidetxtdpatient" *ngIf="showhidepregnant">

NB: Veuillez déclarer le modèle dans votre fichier .ts également: 

showhidepregnant: boolean;
9
Renju

Fondamentalement, vous devez utiliser la liaison de propriété [hidden] pour afficher et masquer le code HTML.

Ensuite, utilisez [(ngModel)] pour la liaison bidirectionnelle dans Angular2 & & __ & __ utilise (eventName) pour que l'événement soit lié à DOM.

Balisage 

<label>
   <input type="checkbox" [(ngModel)]="showhidepregnant"/> Pregnant
</label>

<div class="col-md-4 divhidetxtdpatient" [hidden]="showhidemasked">
   <input class="form-control" tabindex="1" id="id_field_specialist" 
   [(ngModel)]="id_field_specialist" type="text" 
   (blur)="savespecialist()" placeholder="maskable"/>
</div>
2
Pankaj Parkar

vous pouvez vérifier si la case à cocher est cochée ou non en appliquant (change) hook sur la base de la propriété de case à cocher essayez de masquer ou d'afficher div,

ici travaille plnkr pour la même chose:

http://plnkr.co/edit/mIj619FncOpfdwrR0KeG?p=preview

Code de fichier .ts:

checked(value){
    if(document.getElementById('abc').checked==true){
      this.shown= true
    }
    else if(document.getElementById('abc').checked==false)
      this.shown= false;
  }

.html

<input type='checkbox' id= 'abc' (change)="checked('abc')">

<div *ngIf='shown'>
  Hello CheckBox
</div>
1
Pardeep Jain

Vous pouvez également utiliser la syntaxe #variable de Angular. vérifié ( register.checked ) est la propriété de l'élément en entrée qui renvoie l'état vérifié de l'élément.

Remarque : la liaison d'événement (cochée) est nécessaire pour déclencher la vérification des modifications si l'utilisateur a coché/décoché la case:

<div *ngIf="register.checked">
  <h1>Hallo</h1>
</div>
<label><input (change)="register" #register type="checkbox"> Register</label>

0
Mert