如何在控制器中重置UI输入/选择字段且不重载表单？如何联动重置字段？

嘿，我来帮你搞定这两个AngularJS表单的问题！

AngularJS的双向绑定特性就是咱们的好帮手——你完全不用手动操作DOM，只要修改绑定的模型值，UI会自动同步更新。具体可以这么做：

步骤1：保存表单的初始状态 #

在控制器初始化的时候，把表单数据的初始值深拷贝一份存起来，方便后续重置用：

function YourController($scope) {
  var vm = this;
  
  // 初始化你的表单数据模型
  vm.formData = {
    code: null,
    type: null,
    username: '', // 示例input字段
    email: ''     // 示例input字段
  };
  
  // 深拷贝保存初始状态（避免引用类型的赋值问题）
  vm.initialFormData = angular.copy(vm.formData);
  
  // 重置字段的方法
  vm.resetFields = function() {
    // 把初始值复制回表单模型，UI会自动更新
    vm.formData = angular.copy(vm.initialFormData);
    
    // 可选：如果你的表单用了ng-form/form指令，还可以重置表单的验证状态
    if ($scope.yourForm) {
      $scope.yourForm.$setPristine(); // 恢复为 pristine（未修改）状态
      $scope.yourForm.$setUntouched(); // 恢复为 untouched（未触碰）状态
    }
  };
}

步骤2：在UI中触发重置 #

比如加个按钮调用这个方法：

<form name="yourForm" ng-controller="YourController as vm">
  <!-- 你的input/select字段 -->
  <input type="text" ng-model="vm.formData.username" name="username">
  
  <button ng-click="vm.resetFields()">重置字段</button>
</form>

如果只需要重置单个字段，直接给对应的模型赋值就行，比如：

// 单独重置username字段
vm.formData.username = vm.initialFormData.username;
// 或者直接设为空值
vm.formData.username = '';

你已经在code下拉框里加了ng-change事件，接下来只要在对应的控制器方法里实现条件判断和重置逻辑就行。先补全你的HTML代码（给type下拉框补全ng-options）：

<select id="code" name="code" 
        data-ng-model="vm.formData.code" 
        data-ng-options="code.id+ ' - ' + code.description for code in vm.codes track by code.id" 
        data-ng-change="vm.updateTypeField(vm.formData.code)" 
        required>
  <option value="">请选择编码</option> <!-- 加个默认空选项更友好 -->
</select>

<select id="type" name="type" 
        data-ng-model="vm.formData.type" 
        data-ng-options="type.id+ ' - ' + type.description for type in vm.types track by type.id" 
        required>
  <option value="">请选择类型</option>
</select>

然后在控制器里实现updateTypeField方法，根据选中的code值判断是否重置type：

function YourController() {
  var vm = this;
  
  // 假设这是你的codes和types数据源
  vm.codes = [
    {id: 1, description: '编码A'},
    {id: 2, description: '编码B'},
    {id: 3, description: '编码C'}
  ];
  vm.types = [
    {id: 101, description: '类型X'},
    {id: 102, description: '类型Y'},
    {id: 103, description: '类型Z'}
  ];
  
  // 处理code变化的方法
  vm.updateTypeField = function(selectedCode) {
    // 这里写你的条件判断，比如当选中编码A（id=1）时重置type
    if (selectedCode && selectedCode.id === 1) {
      // 重置type的模型值，UI会自动清空选中状态
      vm.formData.type = null;
      
      // 如果type的选项是根据code动态加载的，还可以在这里清空types数据源
      // vm.types = [];
      // 或者重新请求对应code的types数据
      // vm.loadTypesByCode(selectedCode.id);
    } 
    // 其他条件逻辑示例：当选中编码B时，重置为某个默认值
    else if (selectedCode && selectedCode.id === 2) {
      vm.formData.type = vm.types[0]; // 选中第一个类型
    }
  };
}

核心逻辑就是：通过ng-change监听code的变化，在方法里拿到选中的code值，根据业务条件修改vm.formData.type的值，双向绑定会自动同步到UI上。

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