Question

我有一个复选框，我想要实现的是在选中复选框时隐藏div并显示何时在Angular 2.0 beta中取消选中。

我知道如何使用此代码

在角度1.2中执行此操作

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

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>

提前致谢。

Answer 1

为您的复选框提供[(ngModel)]，并使用ngModel使用*ngIf作为div标签。请参阅以下代码示例。

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

然后使用相同的模式：

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

注意：请在 .ts 文件中声明模型：

showhidepregnant: boolean;

Answer 2

基本上，您需要使用[hidden]属性绑定来显示和隐藏HTML。

然后将[(ngModel)]用于two way binding in Angular2＆amp;使用(eventName)将事件限制在DOM。

<强>标记

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

你可以在复选框属性的基础上应用(change)挂钩来检查复选框是否被选中，试图隐藏或显示div，

这是plnkr的工作原理：

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

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

Answer 4

您还可以使用Angular中的 #variable 语法。 已检查（ register.checked ）是input元素的属性，它返回元素的已检查状态。

注意：如果用户选中/取消选中该复选框，则需要使用事件绑定（已选中）来触发检查更改：

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

如何在Angular2中显示和隐藏带有复选框元素的div？

4 个答案: