如何使用Angular通过复选框实现输入框的显示与隐藏？

嘿，这个需求在AngularJS里实现起来特别省心，给你两种最常用的简便方案，按需选就行：

方案一：双向绑定+ngIf（推荐，直接添加/移除DOM） #

这完全贴合你想要的结构，用ng-model绑定复选框的状态，再用ngIf直接控制输入框的DOM存在性：

<input type="checkbox" ng-model="ctrl.showInput" />
<input 
  type="text" 
  placeholder="Something" 
  ng-model="ctrl.value"
  ng-if="ctrl.showInput"
/>

解释：

• 复选框的状态会实时同步到控制器的showInput变量上
• ngIf会根据showInput的布尔值，直接添加或移除输入框的DOM元素，勾选显示，取消隐藏，逻辑清晰直白

方案二：双向绑定+ng-show（适合需要保留DOM的场景） #

如果你不需要移除输入框DOM，只是想通过CSS隐藏它，可以用ng-show替代ngIf：

<input type="checkbox" ng-model="ctrl.showInput" />
<input 
  type="text" 
  placeholder="Something" 
  ng-model="ctrl.value"
  ng-show="ctrl.showInput"
/>

解释：

• 逻辑和方案一一致，但ng-show是通过设置display: none来隐藏元素，DOM始终存在
• 适合需要保留输入框已输入内容、不想重新渲染的场景

控制器基础代码 #

不管用哪种方案，你只需要在控制器里初始化对应的变量即可：

// 假设你的控制器是用controllerAs语法（和示例里的ctrl对应）
app.controller('YourController', function() {
  var ctrl = this;
  ctrl.showInput = false; // 初始默认隐藏输入框
  ctrl.value = ''; // 输入框的初始值
});

内容的提问来源于stack exchange，提问作者Jean T