介绍
ng-model 指令是 Angular 中十分重要的指令之一，它用来实现数据的双向绑定。在 Angular 中，我们可以通过 ng-model 指令将表单控件的值与模型数据进行绑定，这样当表单控件的值发生变化时，模型数据也会随之变化，反之亦然。
使用方法
下面我们通过一个简单的例子来介绍 ng-model 指令的使用方法。假设我们有一个表单控件，它用来输入用户的姓名：
<input type="text" ng-model="name">
在这个例子中，ng-model 指令绑定了一个名为 name 的模型变量。当用户在输入框中输入姓名时，ng-model 指令会自动将输入框中的值赋给 name 变量。反之，当 name 变量的值发生变化时，输入框中的值也会随之变化。
需要注意的是，ng-model 指令只能用于表单控件，例如 input、textarea 和 select 等。此外，ng-model 指令还可以与表单验证指令一起使用，例如 ng-required、ng-minlength 和 ng-maxlength 等，这样可以方便地实现表单验证功能。
示例代码
下面是一个完整的示例代码，它演示了如何使用 ng-model 指令实现一个简单的表单控件：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------- -------- --------------
------- ---------------------------------------------------------------------------------
-------
----- ---------------
---- -----------------------
------
------------------
------ ----------- --------------- ------------------ ---------------- ------------------
----- ---------------------------------------------------
----- -------------------------------------------------------
----- --------------------------------------------------------
-------
-----------------------
------
--------
--- --- - ----------------------- ----
------------------------ ---------------- -
----------- - ---
---
---------
-------
-------在这个示例中，我们定义了一个名为 myApp 的 Angular 应用程序，并在其中定义了一个名为 myCtrl 的控制器。在控制器中，我们定义了一个名为 name 的模型变量，它用来存储用户输入的姓名。在 HTML 中，我们使用 ng-model 指令将输入框和模型变量进行了绑定，同时还使用了表单验证指令 ng-required、ng-minlength 和 ng-maxlength，以实现姓名不能为空、姓名长度不能小于2个字符和姓名长度不能大于10个字符的验证功能。最后，我们在页面中输出了用户输入的姓名。
总结
ng-model 指令是 Angular 中实现数据双向绑定的重要指令之一，它可以方便地将表单控件的值与模型数据进行绑定，从而实现数据的自动同步。在使用 ng-model 指令时，需要注意它只能用于表单控件，并且可以与表单验证指令一起使用，以实现表单验证功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65713b30d2f5e1655d9ecd94