AngularJS表单交互实现求助：点击按钮生成文本框与Checkbox

嘿，作为TypeScript新手想用AngularJS实现这个功能完全没问题，我给你整理了一套清晰的实现方案，一步步来就能搞定：

1. 用一个布尔变量控制文本框和提交按钮的显示/隐藏
2. 点击初始按钮时切换这个变量的状态，显示输入区域
3. 输入内容提交后，把内容存入数组，再通过AngularJS的ng-repeat遍历数组生成复选框
4. 提交后自动隐藏输入区域，方便继续添加新项

HTML模板 #

<div ng-app="checkboxApp" ng-controller="CheckboxController as vm">
  <form>
    <!-- 初始触发按钮 -->
    <button type="button" ng-click="vm.toggleInputArea()">添加新选项</button>

    <!-- 输入区域（默认隐藏） -->
    <div ng-show="vm.showInputArea">
      <textarea ng-model="vm.newItemText" placeholder="输入选项内容..."></textarea>
      <button type="button" ng-click="vm.addCheckbox()">提交</button>
    </div>

    <!-- 生成的复选框列表 -->
    <div ng-repeat="item in vm.checkboxItems track by $index">
      <label>
        <input type="checkbox" ng-model="item.checked">
        {{ item.text }}
      </label>
    </div>
  </form>
</div>

TypeScript控制器代码 #

// 定义AngularJS模块
angular.module('checkboxApp', []);

// 用TypeScript类编写控制器，更符合面向对象风格
class CheckboxController {
  // 控制输入区域显示状态的变量
  showInputArea: boolean = false;
  // 存储所有复选框项的数组
  checkboxItems: Array<{ text: string; checked: boolean }> = [];
  // 绑定文本框输入内容的变量
  newItemText: string = '';

  constructor() {}

  // 切换输入区域的显示/隐藏
  toggleInputArea(): void {
    this.showInputArea = !this.showInputArea;
    // 显示输入区域时自动清空文本框
    if (this.showInputArea) {
      this.newItemText = '';
    }
  }

  // 提交输入内容，生成新的复选框
  addCheckbox(): void {
    // 先判断输入内容是否为空，避免生成无效项
    if (this.newItemText.trim()) {
      this.checkboxItems.push({
        text: this.newItemText.trim(),
        checked: false // 默认未选中
      });
      // 提交后自动隐藏输入区域
      this.showInputArea = false;
    }
  }
}

// 把控制器注册到模块中
angular.module('checkboxApp').controller('CheckboxController', CheckboxController);

• 模块与控制器：用TypeScript类编写控制器比传统的函数式写法更直观，新手更容易理解和维护，也符合TS的语法习惯。
• 状态控制：showInputArea配合ng-show指令，轻松实现输入区域的显示/隐藏逻辑，不需要手动操作DOM。
• 数据绑定：ng-model自动同步文本框的输入内容和控制器中的变量，提交时直接把内容存入数组即可。
• 复选框生成：ng-repeat会自动遍历数组，为每个项生成对应的复选框，同时绑定checked状态，后续如果需要获取选中项也很方便。
• 边界处理：提交前判断输入内容是否为空，避免生成空的复选框，提升用户体验。

内容的提问来源于stack exchange，提问作者Jerold Joel