使用复选框显示或隐藏 Angular 的输入答案

【问题标题】：Use a checkbox to display or hide an input with Angular使用复选框显示或隐藏 Angular 的输入
【发布时间】：2020-01-10 01:58:24
【问题描述】：

我需要用复选框显示或隐藏输入，结构是这样的：

<input type="checkbox"/> <input type="text" placeholder="Something"
       value="{{ctrl.value}}" ng-if="checkbox checked">

如何简单地用角度来做？

【问题讨论】：

我强烈建议您参加 Angular 课程，因为这是您将首先学习的内容之一，从长远来看它将对您有很大帮助。 ngIf
是的，我用一个简单的 ng-if 做到了，谢谢。
该问题使用AngularJS代码并被标记为AngularJS；接受的答案是 Angular 2+。

标签： angularjs checkbox

【解决方案1】：

这是您在探索 Angular 并通过 Angular Documentation 时将学习的第一件事，因此我强烈建议您研究一下。

无论如何，要完成这项工作，您需要 ts 文件中的一些值，您可以使用 ngModel 绑定到您的 html 文件，这可能最适合您。

TS 文件

inputHidden = false; // This determines whether the text input is rendered or not
ctrl: { // This follows the convention you've outlined, with ctrl.
   value: any
}

HTML

<input type="checkbox" [(ngModel)]="inputHidden">
<input type="text" placeholder="Something" [(ngModel)]="ctrl.value" *ngIf="inputHidden">

【讨论】：

谢谢，我自己找到的，我问是因为我之前找到的每个答案对于完成这个简单的任务来说似乎都相当复杂。

【解决方案2】：

<input type="checkbox" name="mycheckbox" ng-model="ctrl.checked"/>

<input type="text" placeholder="Something" value="{{ctrl.value}}" ng-if="ctrl.checked">

【讨论】：

请始终将您的答案放在上下文中，而不仅仅是粘贴代码。有关详细信息，请参阅here。