AngularJS 1.6中如何为ng-model绑定的输入框设置默认值？

我来帮你搞定这个问题！你的核心问题出在没有提前初始化projectData对象，再加上对ng-init的用法有误区，导致双向绑定没生效。

为什么你的写法无效？ #

• 你在HTML里用ng-model="projectData.title"，但控制器里只定义了$scope.title，却没初始化$scope.projectData这个对象。AngularJS无法给一个不存在的对象的属性赋值，所以ng-init里的赋值根本起不到作用。
• 你尝试的ng-init="projectData.title={{title}}"是错误用法：ng-init里直接写Angular表达式就行，不需要加插值语法{{}}，加了之后反而会把title的值当成字符串字面量处理，而且本质问题还是projectData不存在。
• ng-init="projectData.title='title'"同样因为projectData未初始化，赋值操作无法生效。

正确的解决方案（推荐） #

AngularJS官方并不推荐用ng-init来初始化控制器的数据模型，最佳实践是在控制器里直接初始化数据对象，这样代码更清晰，也能避免绑定问题。

控制器代码：

// 先初始化projectData对象，同时设置默认值
$scope.projectData = {
  title: "This is just title"
};

HTML代码：

<!-- 直接绑定已初始化的projectData.title，不需要ng-init -->
<input type="text" ng-model="projectData.title" name="title" class="form-control" />

这样修改后，输入框就能正常显示默认值了，后续的双向绑定也能正常工作。

如果一定要用ng-init的话（不推荐） #

如果你坚持要用ng-init，必须先在控制器里初始化projectData对象：

控制器代码：

$scope.title = "This is just title";
// 先初始化空的projectData对象
$scope.projectData = {};

HTML代码：

<!-- ng-init里直接写表达式，不需要{{}} -->
<input type="text" ng-model="projectData.title" ng-init="projectData.title = title" name="title" class="form-control" />

但还是强烈建议用第一种方案，把数据初始化逻辑放在控制器里，符合AngularJS的设计规范。

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