AngularJS中点击Type 2时如何禁用Type 1并避免值同步显示

你遇到的问题核心是两个下拉框绑定了同一个ng-model变量，所以不管选哪个，值都会同步显示。ng-disabled只是禁止用户操作Type1，但不会切断模型绑定，所以Type1还是会跟着变。

解决方法很简单：给两个下拉框分配独立的模型变量，彻底分开它们的绑定关系。

错误代码示例（问题根源） #

<!-- 错误：两个下拉框共用同一个ng-model -->
<select ng-model="selectedValue" ng-disabled="type2Active">
  <option value="type1">Type 1</option>
</select>
<select ng-model="selectedValue" ng-change="type2Active = true">
  <option value="type2">Type 2</option>
</select>

修改后的正确代码 #

<!-- Type1下拉框：绑定独立模型，选中Type2时禁用 -->
<select ng-model="type1Value" ng-disabled="type2Active">
  <option value="type1">Type 1</option>
</select>

<!-- Type2下拉框：绑定独立模型，选中时标记状态并清空Type1的值 -->
<select ng-model="type2Value" ng-change="handleType2Select()">
  <option value="type2">Type 2</option>
</select>

对应的控制器代码：

angular.module('yourApp', [])
.controller('yourCtrl', function($scope) {
  $scope.type2Active = false;
  
  // 处理Type2选中事件
  $scope.handleType2Select = function() {
    $scope.type2Active = true;
    $scope.type1Value = ''; // 可选：选中Type2时清空Type1的选中值
  };
});

这样修改后，两个下拉框的选中状态完全独立，选中Type2时，Type1的模型不会被修改，即使禁用也不会显示Type2的选中值。

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