ng-select无法恢复旧值求助：取消操作后控件显示空白

首先咱们来拆解你遇到的问题：点击取消后下拉框变成空白，核心原因有两个：

1. 插值传递旧值的致命错误 #

你在ng-change里传递'{{selectedName}}'作为oldValue参数，这是问题的根源。因为selectedName是一个对象（从你JS里的oldValueObject结构能看出来），Angular插值{{selectedName}}会把对象转换成字符串"[object Object]"。当你执行JSON.parse(oldValue)时，这个字符串根本不是有效的JSON，会直接抛出语法错误，导致后续恢复旧值的代码完全没执行——这就是下拉框变成空白的直接原因。

2. ng-change的执行时机问题 #

ng-change是在Angular已经把ngModel更新为新值之后才触发的。就算你传递了正确的旧值，直接赋值$scope.selectedName = oldValueObject也可能因为Angular的消化周期（digest cycle）机制，无法正确回滚视图显示。

正确实现方案：用$watch监听变化并回滚 #

推荐使用Angular的$watch来跟踪selectedName的变化，这样能在变化发生时轻松获取新旧值，并且正确回滚视图。

步骤1：修改HTML（移除错误的ng-change参数） #

<select 
  ng-model="selectedName" 
  ng-options="item.name group by item.groupName for item in names" 
  class="code-helper" 
  id="code-helperId"
>
  <option value="">Select Option</option>
</select>

步骤2：在控制器中添加$watch逻辑 #

// 深度监听selectedName的变化（因为它是对象）
$scope.$watch('selectedName', function(newValue, oldValue) {
  // 排除初始加载时的无意义变化
  if (newValue === oldValue) return;

  // 检查编辑器是否有未保存更改
  if (!globalEditor1.isClean()) {
    var confirmLeave = confirm("You have unsaved changes, are you sure you want to proceed ?");
    if (!confirmLeave) {
      // 直接回滚到旧值，Angular会自动更新视图
      $scope.selectedName = oldValue;
      $scope.isPaneShown = false;
      return;
    }
  }

  // 如果用户确认，可以在这里执行原本retrieveSelectedClass里的其他逻辑
  // ...
}, true); // 第三个参数true表示深度监听对象的属性变化

额外补充（如果坚持用ng-change的方式） #

如果你不想用$watch，需要注意两个关键点：

• 不要用插值传递旧值，而是在控制器里提前保存旧值（比如在$scope上存一个previousSelectedName变量，每次确认变化后更新）
• 回滚时必须赋值原数组中的对象引用，不能重新创建对象（Angular的ng-options是通过对象引用来匹配选中项的，新创建的对象即使属性完全一致，也无法匹配原选项）

示例代码片段：

// 提前在控制器初始化时保存初始值
$scope.previousSelectedName = $scope.selectedName;

// 修改ng-change为只传新值
// ng-change="retrieveSelectedClass(selectedName)"

$scope.retrieveSelectedClass = function(newValue) {
  if (!globalEditor1.isClean()) {
    var r = confirm("You have unsaved changes, are you sure you want to proceed ?");
    if (!r) {
      // 从原数组中找到旧对象的引用
      var oldItem = $scope.names.find(item => item.id === $scope.previousSelectedName.id);
      $scope.selectedName = oldItem;
      $scope.isPaneShown = false;
      return;
    }
  }
  // 确认后更新保存的旧值
  $scope.previousSelectedName = newValue;
}

不过相比之下，$watch的方式更简洁可靠，也更符合Angular的设计思路。

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