AngularJS如何绑定输入框默认值并同步至预览区域？

嘿，刚上手AngularJS的时候我也碰到过一模一样的问题！其实核心原因很简单：AngularJS的ng-model会完全接管输入框的内容，你直接在input标签里写value="blablabla"会被ng-model绑定的变量初始值覆盖——如果那个变量一开始是空的，输入框自然就显示空了。

要实现「旧数据作为默认值显示+实时同步预览」的需求，只需要两步：

• 在控制器里初始化绑定变量为旧数据
  不要在HTML的input标签里写value，而是在对应的控制器里，把你需要的默认值（也就是旧数据）赋值给ng-model绑定的变量。比如：

  // 假设你的应用模块叫myApp，控制器叫UpdateController
  angular.module('myApp', [])
    .controller('UpdateController', function($scope) {
      // 这里替换成实际的旧数据，比如从后端接口获取的内容
      $scope.editContent = 'blablabla';
    });
  

• HTML里只保留ng-model绑定
  输入框和预览区都绑定同一个变量，不用额外加value属性：

  <div ng-app="myApp" ng-controller="UpdateController">
    <input type="text" ng-model="editContent">
    <!-- 预览区域直接插值显示变量 -->
    <div class="preview-area">
      预览：{{ editContent }}
    </div>
  </div>
  

这样一来，页面加载后输入框会直接显示初始化的blablabla，你输入内容时，预览区也会实时同步更新，完全符合你开发更新功能的需求。

额外提个小细节：如果你的旧数据是通过异步请求（比如$http）获取的，记得在请求成功回调里再给$scope.editContent赋值，确保数据回来后再渲染，避免初始显示空的情况。

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