AngularJS如何重置下拉选择框（select）选项？

问题描述 #

使用以下AngularJS下拉选择框代码，无法将其重置回默认的"Select Course"选项。尝试将selectedAssignTraining设为""或对应数组项均未生效：

<select ng-model="selectedAssignTraining" 
        ng-change="filterAssignedMembers(selectedAssignTraining)" 
        ng-options="training.code as training.name for training in activeTrainings" 
        class="form-control" 
        ng-required="true">
  <option value="" selected>Select Course</option>
</select>

解决方案 #

1. 修复作用域绑定问题（最常见原因） #

AngularJS中基本类型（字符串、数字）的作用域继承会导致父作用域变量无法被子作用域正确修改，改用对象属性绑定可彻底解决这个问题：

• 在控制器中初始化一个表单对象：

$scope.formData = {
  selectedAssignTraining: "" // 初始值设为空，匹配默认选项
};

• 修改HTML中的ng-model为对象属性：

<select ng-model="formData.selectedAssignTraining" 
        ng-change="filterAssignedMembers(formData.selectedAssignTraining)" 
        ng-options="training.code as training.name for training in activeTrainings" 
        class="form-control" 
        ng-required="true">
  <option value="">Select Course</option> <!-- 移除手动selected，由ng-model控制选中状态 -->
</select>

2. 正确执行重置操作 #

重置时直接将对象属性设为空字符串即可：

// 示例重置函数
$scope.resetCourseSelect = function() {
  $scope.formData.selectedAssignTraining = "";
};

3. 排查数组数据冲突 #

确保activeTrainings数组中没有code为空字符串的项，否则会和默认选项的value=""冲突，导致选中数组中的项而非默认提示项。

4. 处理表单验证状态（可选） #

ng-required="true"只会标记表单必填，不会阻止重置，但如果需要同步重置表单状态，可在重置函数中添加：

$scope.resetCourseSelect = function() {
  $scope.formData.selectedAssignTraining = "";
  // 假设表单名称为courseForm，重置表单 pristine/untouched 状态
  $scope.courseForm.$setPristine();
  $scope.courseForm.$setUntouched();
};

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