AngularJS ng-model 指令（千字长文）

AngularJS ng-model 指令：双向数据绑定的核心钥匙

你是否曾经在开发表单时，反复写 oninput、onchange 事件来同步用户输入和数据？或者在每次修改输入框内容后，手动从 DOM 获取值并更新到变量？这种“手动同步”的模式，不仅繁琐，还容易出错。而 AngularJS 提供的 ng-model 指令，正是为了解决这类问题而生的。

ng-model 指令是 AngularJS 中实现 双向数据绑定 的核心机制。它就像一个“桥梁”，自动连接 HTML 表单控件与 JavaScript 中的模型数据。当你在输入框中输入内容时，模型数据会自动更新；反之，当模型数据改变时，输入框的显示也会实时刷新。

这种机制极大简化了表单开发流程，尤其适合构建动态、交互性强的 Web 应用。接下来，我们就深入探讨 ng-model 指令的原理、用法与最佳实践。

什么是双向数据绑定？一个形象比喻

想象你有一本魔法笔记本，上面写着“今天要买牛奶”。你每次在笔记本上改一个字，旁边的手电筒就会立刻亮起或熄灭，告诉你状态变化。反过来，你用手电筒开关，笔记本上的文字也会自动更新。

这个“笔记本 + 手电筒”的联动，就是 双向数据绑定 的直观体现。在网页中，ng-model 就是这个“魔法笔记本”与“手电筒”之间的连接线。

当用户在输入框中打字时，ng-model 会自动将新值同步到作用域中的变量；当这个变量在代码中被修改时，输入框的显示内容也会自动更新。整个过程无需手动操作 DOM，完全由 AngularJS 内部管理。

基础用法：绑定文本输入框

让我们从最简单的例子开始。假设我们要实现一个“用户名输入”功能，实时显示用户输入的内容。

<!DOCTYPE html>
<html ng-app>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>

  <div ng-controller="UserCtrl">
    <label>请输入用户名：</label>
    <!-- 使用 ng-model 绑定 username 变量 -->
    <input type="text" ng-model="username" placeholder="输入你的名字">
    
    <!-- 显示当前用户名 -->
    <p>你输入的是：{{ username }}</p>
  </div>

  <script>
    // 定义控制器
    function UserCtrl($scope) {
      // 初始化 username 变量
      $scope.username = '';
    }
  </script>

</body>
</html>

代码注释说明：

ng-app：启用 AngularJS 应用，是整个应用的根容器。
ng-controller="UserCtrl"：指定该区域由 UserCtrl 控制器管理。
ng-model="username"：将输入框的值与 $scope.username 变量绑定。这是双向绑定的关键。
{{ username }}：插值表达式，显示 username 的当前值。
function UserCtrl($scope)：控制器函数，通过 $scope 传递数据到视图。

当你在输入框中输入“张三”，页面会立刻显示“你输入的是：张三”。这个过程完全由 ng-model 自动完成，无需任何 JavaScript 事件监听。

支持的表单元素类型

ng-model 不仅适用于文本输入框，还支持多种常见表单元素。以下是主要支持的类型：

表单元素	说明	示例
`<input type="text">`	文本输入	`ng-model="name"`
`<input type="number">`	数字输入	`ng-model="age"`
`<input type="checkbox">`	复选框	`ng-model="isAgree"`
`<input type="radio">`	单选按钮	`ng-model="gender"`
`<select>`	下拉选择框	`ng-model="city"`

示例：复选框与单选按钮

<div ng-controller="FormCtrl">
  <p>
    <input type="checkbox" ng-model="isMember"> 是否是会员？
  </p>

  <p>
    <label><input type="radio" name="gender" value="male" ng-model="gender"> 男</label>
    <label><input type="radio" name="gender" value="female" ng-model="gender"> 女</label>
  </p>

  <p>
    你选择的性别是：{{ gender }}
  </p>

  <p>
    你是会员吗？{{ isMember ? '是' : '否' }}
  </p>
</div>

<script>
  function FormCtrl($scope) {
    $scope.isMember = false;
    $scope.gender = ''; // 初始为空
  }
</script>

关键点说明：

复选框绑定布尔值（true/false），ng-model 会自动同步选中/未选中状态。
单选按钮必须设置相同的 name 属性，且 value 值不同，ng-model 会根据选中项更新变量。
使用三元表达式 {{ isMember ? '是' : '否' }} 实现条件显示。

数据验证与状态控制

ng-model 还提供了丰富的表单验证能力。在绑定的同时，AngularJS 会自动添加一些状态属性，供你判断表单状态。

常见验证状态（在 `$scope` 中可访问）：

formName.inputName.$valid：是否有效
formName.inputName.$invalid：是否无效
formName.inputName.$dirty：是否已修改
formName.inputName.$pristine：是否未修改
formName.inputName.$touched：是否已聚焦过

示例：带验证的邮箱输入

<form name="emailForm" ng-controller="EmailCtrl">
  <label>请输入邮箱：</label>
  <input type="email" name="email" ng-model="user.email" required>

  <!-- 显示验证状态 -->
  <div ng-show="emailForm.email.$dirty">
    <span ng-show="emailForm.email.$error.required">邮箱是必填项</span>
    <span ng-show="emailForm.email.$error.email">请输入有效的邮箱格式</span>
  </div>

  <p>当前邮箱：{{ user.email || '未输入' }}</p>
</form>

<script>
  function EmailCtrl($scope) {
    $scope.user = {
      email: ''
    };
  }
</script>

说明：

name="email"：为输入框命名，用于在表单中引用。
required：HTML5 原生验证，配合 ng-model 使用。
emailForm.email.$dirty：表示用户是否已操作过该输入框。
emailForm.email.$error.required：当输入为空时触发。
emailForm.email.$error.email：当格式不合法时触发。

通过这些状态，你可以实现优雅的错误提示，提升用户体验。

与 ng-change 配合使用：监听值变化

虽然 ng-model 会自动同步数据，但有时你需要在值变化时执行特定逻辑，比如发送请求、触发动画等。这时可以使用 ng-change 指令。

<div ng-controller="ChangeCtrl">
  <input type="text" ng-model="message" ng-change="onMessageChange()">
  
  <p>你输入的内容：{{ message }}</p>
  <p>变化次数：{{ changeCount }}</p>
</div>

<script>
  function ChangeCtrl($scope) {
    $scope.message = '';
    $scope.changeCount = 0;

    // 每次值变化时调用此函数
    $scope.onMessageChange = function() {
      console.log('输入值已更新：', $scope.message);
      $scope.changeCount += 1;
    };
  }
</script>

注意：

ng-change 只在值真正改变时触发，不会在页面初始化时执行。
适合用于实时搜索、表单校验、自动保存等场景。

最佳实践与常见陷阱

1. 避免在 `ng-model` 中使用复杂表达式

不要写成：

<input ng-model="user.name + ' ' + user.surname">

这会导致数据绑定混乱，且无法正常更新。

✅ 正确做法是：在控制器中定义一个计算字段。

$scope.fullName = function() {
  return $scope.user.name + ' ' + $scope.user.surname;
};

然后在模板中使用：{{ fullName() }}

2. 为表单元素添加 `name` 属性

ng-model 与 name 配合使用，才能启用表单验证和状态管理。没有 name，就无法访问 $error、$dirty 等属性。

3. 使用 `track by` 处理数组绑定

在 ng-repeat 中绑定对象时，建议使用 track by 优化性能：

<select ng-model="selectedUser" ng-options="user.id as user.name for user in users track by user.id">
</select>

总结：掌握 `ng-model` 指令，提升开发效率

AngularJS ng-model 指令 是构建动态表单的基石。它通过双向数据绑定，让视图与模型之间的同步变得简单、直观。无论是文本输入、复选框、单选按钮，还是复杂的表单验证，ng-model 都能轻松应对。

记住：

它让数据流动“自动”发生，减少手动 DOM 操作；
它与 ng-change、表单验证状态配合，实现更智能的交互；
它是 AngularJS 开发中不可或缺的“瑞士军刀”。

掌握 ng-model，你就掌握了构建现代 Web 表单的核心能力。在实际项目中，它能显著提升开发效率，减少出错率。不妨从今天开始，在你的下一个表单中尝试使用它，感受双向绑定带来的便捷吧。