Wie kann man ein Div mit einem Checkbox-Element in Angular2 ein- und ausblenden?

Question

Ich habe ein Kontrollkästchen und was ich versuche zu erreichen ist, die div zu verstecken, wenn das Kontrollkästchen aktiviert ist und wenn es in Angular 2.0 Beta deaktiviert ist.

Ich weiß, wie diese

im Voraus

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

-Code auf dem 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> 

Dank mit diesem Code in Winkel 1.2 zu tun.

Answer 1

Grundsätzlich müssen Sie [hidden] Eigenschaftenbindung zum Anzeigen und Ausblenden von HTML verwenden.

Und dann [(ngModel)] für two way binding in Angular2 & verwenden Sie (eventName), Ereignis an DOM gebunden zu haben.

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

können Sie überprüfen, ob Kontrollkästchen aktiviert ist oder nicht durch (change) Haken auf der Basis von Checkbox Eigenschaft try Anwendung ein- oder ausblenden div,

hier arbeitet plnkr für gleiche :

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

.ts Datei Code:

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

[(ngModel)] für Ihre Kontrollkästchen Geben Sie und die gleiche ngModel*ngIf für div-Tag verwenden. Siehe das folgende Codebeispiel.

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

dann den gleichen Modus verwenden:

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

NB: Bitte erklären Sie das Modell in Ihrer .ts Datei auch:

showhidepregnant: boolean; 

Answer 4

Sie können auch die #Variable verwenden Syntax von Angular. geprüft (register.checked) ist die Eigenschaft des Eingabeelements, das den aktivierten Status des Elements zurückgibt.

Hinweis: die Event-Bindung (markiert) benötigt wird, um die Prüfung für Änderungen auszulösen, wenn der Benutzer/nicht markiert das Kontrollkästchen aktiviert hat:

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