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

Posted 2023-03-13

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

【英文标题】：How to show and hide a div with a checkbox element in Angular2?

【发布时间】：2016-05-28 19:07:07

【问题描述】：

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

我知道如何使用此代码在 angular 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>

提前致谢。

【问题讨论】：

您是否尝试过自己寻找解决方案？您对实际解决方案有意见吗？

【参考方案1】：

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

然后将[(ngModel)] 用于two way binding in Angular2 并使用(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>

【参考方案2】：

你可以通过在checkbox属性的基础上应用(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>

【参考方案3】：

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

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

然后使用相同的模式：

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

注意：请同时在您的 .ts 文件中声明模型：

showhidepregnant: boolean;

【讨论】：

我们可以对角度上的反应形式使用相同的格式

【参考方案4】：

您还可以使用 Angular 中的 #variable 语法。 checked (register.checked) 是输入元素的属性，它返回元素的检查状态。 注意：如果用户选中/取消选中复选框，则需要事件绑定（选中）来触发更改检查：

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