AngularJS如何获取输入框默认值（无需点击或修改）

安全阿岳

2026-5-29

如何在AngularJS中获取输入框的默认值

这是AngularJS入门阶段很容易碰到的问题，我来帮你拆解原因和解决办法：

问题原因

AngularJS的ng-model是和$scope变量做双向绑定的，但它不会自动读取input标签的value属性值作为初始值。当页面加载时，$scope.mid没有被初始化，所以即使input上写了value="3"，只要用户没和输入框交互（点击、修改内容），Angular就不会把DOM里的value同步到$scope.mid，这就是调用logId()时返回undefined的原因。

解决办法

这里有几种靠谱的方案，按推荐程度排序：

1. 在控制器中初始化$scope变量（最佳实践）

直接在控制器里给$scope.mid设置初始值3，这样ng-model一开始就有绑定的数据源，完全符合Angular数据驱动的设计理念：

// 你的控制器代码
$scope.mid = 3; // 初始化默认值
$scope.logId = function() {
  console.log($scope.mid);
  return $scope.mid;
};

对应的HTML可以去掉value属性，因为ng-model会自动把初始值渲染到输入框里：

<input ng-model="mid" type="text" id="dataid" placeholder="here..." />

2. 使用ng-init初始化（适合简单场景）

如果你的默认值是写在HTML里的（比如后端渲染的静态值），可以用ng-init指令直接在input上初始化scope变量：

<input ng-model="mid" value="3" type="text" id="dataid" placeholder="here..." ng-init="mid = 3" />

⚠️ 注意：ng-init只适合简单的初始化操作，复杂逻辑还是建议放在控制器里。

3. 读取DOM元素的value值（不推荐）

虽然可以通过操作DOM来获取value值再赋值给scope，但这违背了Angular数据驱动的原则，除非特殊情况不建议使用：

// 控制器代码
var inputElement = angular.element(document.getElementById('dataid'));
$scope.mid = inputElement.val(); // 读取DOM的value值赋值给scope

$scope.logId = function() {
  console.log($scope.mid);
  return $scope.mid;
};