AngularJS：同ng-model输入框值不同步实现方案咨询

嘿，我懂你碰到的这个困扰——AngularJS默认的双向绑定机制确实会让共用ng-model的输入框自动同步内容，但咱们有几个实用的办法可以打破这个默认行为，让两个输入框各自独立：

方案1：使用独立的ng-model（最推荐） #

这是最直接也最符合AngularJS设计思路的做法：给两个输入框分别绑定不同的模型变量，从根源上切断自动同步的关联。

示例代码 #

<!-- 视图部分 -->
<input type="text" ng-model="inputValue1" placeholder="输入框1">
<input type="text" ng-model="inputValue2" placeholder="输入框2">

// 控制器部分
angular.module('myApp', [])
.controller('myController', function($scope) {
  // 初始化两个独立的模型变量
  $scope.inputValue1 = '';
  $scope.inputValue2 = '';
});

如果之后你需要在特定场景下让它们同步（比如点击按钮同步内容），只需要在控制器里加个简单的方法就行：

$scope.syncToInput2 = function() {
  $scope.inputValue2 = $scope.inputValue1;
};

$scope.syncToInput1 = function() {
  $scope.inputValue1 = $scope.inputValue2;
};

然后在视图里加按钮调用这些方法：

<button ng-click="syncToInput2">把输入框1的内容同步到输入框2</button>
<button ng-click="syncToInput1">把输入框2的内容同步到输入框1</button>

方案2：利用ng-model-options的getterSetter（适合需要特殊逻辑的场景） #

如果因为某些原因你不想用两个独立模型，也可以用ng-model-options的getterSetter选项，给每个输入框绑定同一个模型但使用不同的 getter/setter 函数，以此实现值的隔离。

示例代码 #

// 控制器部分
angular.module('myApp', [])
.controller('myController', function($scope) {
  // 存储两个输入框的独立值
  let value1 = '';
  let value2 = '';

  // 输入框1的getter/setter
  $scope.getSetValue1 = function(newVal) {
    if (angular.isDefined(newVal)) {
      value1 = newVal;
    }
    return value1;
  };

  // 输入框2的getter/setter
  $scope.getSetValue2 = function(newVal) {
    if (angular.isDefined(newVal)) {
      value2 = newVal;
    }
    return value2;
  };
});

<!-- 视图部分 -->
<input type="text" ng-model="getSetValue1" ng-model-options="{ getterSetter: true }" placeholder="输入框1">
<input type="text" ng-model="getSetValue2" ng-model-options="{ getterSetter: true }" placeholder="输入框2">

这种方式看起来共用了类似的绑定逻辑，但实际上两个输入框的值是完全隔离的，适合需要对输入值做额外处理（比如格式化、验证）的场景。

方案3：用$watch手动拦截同步（不推荐，过度复杂） #

虽然可以通过$watch监听模型变化然后手动覆盖值，但这种方式会绕开AngularJS的正常绑定流程，容易引发意外的bug，所以只在极端场景下考虑使用。

总的来说，方案1是最简洁且易维护的，除非你有特殊的业务逻辑需求，否则优先用独立模型的方式解决问题。

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