如何在AngularJS中将一个输入框的值实时同步至另一个输入框？

你的代码没法实现实时同步，核心问题在于控制器里的赋值语句只执行了一次：$scope.value2 = "this is it: " + $scope.value1; 这条代码只会在控制器初始化的时候运行，当你在输入框里修改value1时，AngularJS不会自动重新计算这个值，所以value2自然不会跟着更新。

下面给你两种靠谱的解决方案，按需选择：

方案一：直接在视图中使用表达式（最简单快捷） #

AngularJS的视图会自动进行脏检查，只要绑定的变量发生变化，视图里的表达式就会重新计算并更新。所以我们可以跳过在控制器里手动赋值value2，直接在视图里实现拼接逻辑：

<html>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
  <body ng-app="myApp">
    <div ng-controller='MyController'>
      <h1>Introduce your value:</h1>
      <input type="text" ng-model="value1">
      <br>
      <!-- 用表达式实时拼接value1的值，readonly让这个输入框不能编辑 -->
      <input type="text" value="{{ 'this is it: ' + value1 }}" readonly>
      <!-- 如果需要第二个输入框也能编辑并同步回第一个，直接绑定同一个ng-model即可： -->
      <!-- <input type="text" ng-model="value1"> -->
    </div>
  </body>
</html>

var app = angular.module('myApp', []);
app.controller('MyController', ['$scope', function($scope) {
  // 可选：给value1设置一个初始值
  $scope.value1 = '';
}]);

这个方案的好处是不用写额外的逻辑，完全利用AngularJS的双向绑定机制，简洁高效。

方案二：用$watch监听变量变化（适合复杂逻辑场景） #

如果你的同步逻辑比较复杂（比如需要对输入值做格式转换、验证或者其他处理），可以在控制器里用$scope.$watch来监听value1的变化，每次值改变时手动更新value2：

var app = angular.module('myApp', []);
app.controller('MyController', ['$scope', function($scope) {
  $scope.value1 = '';
  
  // 监听value1的变化，newVal是变化后的值，oldVal是变化前的值
  $scope.$watch('value1', function(newVal, oldVal) {
    // 这里可以添加任何你需要的复杂逻辑
    $scope.value2 = "this is it: " + newVal;
  });
}]);

<html>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
  <body ng-app="myApp">
    <div ng-controller='MyController'>
      <h1>Introduce your value:</h1>
      <input type="text" ng-model="value1">
      <br>
      <input type="text" ng-model="value2" readonly>
    </div>
  </body>
</html>

$watch会持续监控value1的状态，只要它发生变化，回调函数就会触发，你可以在里面做任何自定义处理后再更新value2。

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