Come mostrare e nascondere un div con un elemento checkbox in Angular2?

Question

Ho una casella di controllo e quello che sto cercando di ottenere è nascondere il div quando la casella è spuntata e mostrare quando è deselezionata in Angular 2.0 beta.

so come fare questo in angolare 1.2 con questo codice

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

codice a 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> 

Grazie in anticipo.

Answer 1

Fondamentalmente è necessario utilizzare il binding di proprietà [hidden] per mostrare e nascondere HTML.

E quindi utilizzare [(ngModel)] per two way binding in Angular2 & utilizzare (eventName) per avere l'evento limitato a DOM.

Markup

<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> 

Answer 2

è possibile verificare se casella è selezionata o meno applicando (change) gancio sulla base della casella di proprietà cercano di nascondere o mostrare div,

Ecco plnkr lavorando per lo stesso :

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

ts codice del file:

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> 

Answer 3

Fornire [(ngModel)] per la casella di controllo e utilizzare lo stesso ngModel utilizzando *ngIf per il tag div. Vedi l'esempio del codice seguente.

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

quindi utilizzare la stessa modalità:

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

NB: Si prega di dichiarare il modello in vostro Ts di file anche:

showhidepregnant: boolean; 

Answer 4

È anche possibile utilizzare il #variable sintassi da angolare. controllato (register.checked) è la proprietà dell'elemento di input che restituisce lo stato verificato dell'elemento.

Nota: l'evento-binding (controllato) è necessario per attivare il controllo per le modifiche, se l'utente ha verificato/deselezionata la casella di controllo:

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