使用JavaScript设置输入框值，提交表单时数据为空的问题

这个问题我太熟了！你遇到的是Angular双向绑定的典型坑——直接用原生JS修改input的value属性，Angular根本没察觉到这个变化，所以绑定的ng-model变量（比如book.Author）还是空的，提交自然拿不到数据。

为什么会这样？ #

Angular的双向绑定依赖它自身的变更检测机制：只有当你通过Angular的方式修改数据（比如直接操作$scope变量或组件属性），它才会自动同步视图和模型。而原生JS的document.getElementById().value = ...属于绕开Angular的DOM操作，Angular不会监听这种外部修改，所以模型不会更新。

正确的解决方法 #

1. 直接操作ng-model绑定的变量（推荐）

这是最符合Angular设计思路的方式，不需要碰DOM：

// 假设你用的是AngularJS，在控制器中直接修改$scope绑定的变量
$scope.book.Title = item.volumeInfo.title;
$scope.book.Author = item.volumeInfo.authors?.join(', ') || ''; // 处理authors为空的情况

这样修改后，Angular会自动触发变更检测，同步更新input的显示，同时book对象的属性也会被正确赋值，提交时就能拿到数据了。

2. 若必须用DOM操作，手动触发Angular的变更检测

如果因为某些场景不得不使用原生DOM操作，那需要手动通知Angular更新模型：

// AngularJS环境下的写法
var titleInput = document.getElementById('Title');
// 获取input对应的ngModel控制器
var ngModelCtrl = angular.element(titleInput).controller('ngModel');
// 设置视图值并同步到模型
ngModelCtrl.$setViewValue(item.volumeInfo.title);
ngModelCtrl.$render(); // 强制更新视图（可选，因为$setViewValue通常会自动触发）

// 对Author字段做同样操作
var authorInput = document.getElementById('Author');
var authorNgModel = angular.element(authorInput).controller('ngModel');
authorNgModel.$setViewValue(item.volumeInfo.authors?.join(', ') || '');
authorNgModel.$render();

或者用$apply包裹DOM操作，强制触发变更检测：

$scope.$apply(function() {
  document.getElementById('Title').value = item.volumeInfo.title;
  document.getElementById('Author').value = item.volumeInfo.authors?.join(', ') || '';
});

不过这种方式不如直接操作模型变量优雅，尽量少用。

总结 #

永远优先通过修改ng-model绑定的变量来更新视图，这是Angular双向绑定的核心用法。绕开Angular操作DOM不仅会导致模型不同步，还可能引发其他变更检测相关的问题。

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