在 AngularJS 中，ng-model 是一个非常重要的指令，它可以将表单中的数据和作用域中的变量进行双向绑定。这使得我们可以非常方便地获取表单中的数据，并将数据同步到作用域中，从而实现数据的实时更新。
ng-model 的基本用法
ng-model 的基本用法非常简单，只需要在表单元素上添加 ng-model 指令即可。例如，我们可以在一个文本框中添加 ng-model 指令，将其绑定到作用域中的一个变量：
------ ----------- ----------------
这样，当用户在文本框中输入内容时，作用域中的 name 变量也会实时更新。反之，如果我们在作用域中修改了 name 变量的值，文本框中的内容也会自动更新。
ng-model 的高级用法
除了基本用法外，ng-model 还有一些高级用法，可以满足更复杂的需求。
在表单中使用对象
有时候，我们可能需要将表单中的数据保存为一个对象，而不是单个变量。这时，我们可以使用 ng-model 的点语法来实现。例如，我们可以将一个表单中的用户名和密码保存为一个对象：
------ ------ ----------- --------------------- ------ --------------- ------------------------- -------
这样，当用户在表单中输入用户名和密码时，我们可以通过 user.name 和 user.password 来获取到这两个值。
在表单中使用数组
类似地，我们也可以将表单中的数据保存为一个数组。例如，我们可以将一个多选框中选中的值保存为一个数组：
------ ------ --------------- ----------------------- -------------- ------ --------------- ------------------------ --------------- ------ --------------- ------------------------ --------------- -------
这样，当用户选中了苹果、橙子和香蕉时，我们可以通过 fruits 数组来获取到这三个值。
在表单中使用自定义指令
除了基本的表单元素外，我们还可以使用自定义指令来实现特定的表单功能。例如，我们可以使用自定义指令来实现一个带有验证功能的表单元素：
------ ------ ----------- ---------------- --------------- -------
这里，我们使用了一个名为 validate-email 的自定义指令，它可以对输入的邮箱进行验证。当用户输入的邮箱格式不正确时，我们可以通过 ng-model 的 $invalid 属性来显示错误信息。
示例代码
下面是一个完整的示例代码，演示了如何在 AngularJS 中使用 ng-model 来绑定表单中的数据：
--------- -----
----- ---------------
------
----- ----------------
---------------- -------- ----------
------- ---------------------------------------------------------------------------------
--------
--- --- - ----------------------- ----
------------------------ ---------------- -
----------- - ---
------------- - ---
---
------------------------------ ---------- -
------ -
-------- ----------
----- --------------- -------- ------ ----- -
---------------------- - -------------------- ---------- -
-- --------------------------- -
------ -----
-
------ ----------------------------------------------------------
--
-
--
---
---------
-------
----- -----------------------
------
-------------------
------ ----------- -------------------------
------------------
------ --------------- -----------------------------
---------------------
------ --------------- ----------------------- ----------------
------ --------------- ------------------------ -----------------
------ --------------- ------------------------ ---------------------
------------------
------ ----------- ---------------- -------------------
------- -------------------------
-------
------- ---- - ---- --------
------- ------ - ---- --------
------- ----- --------
-------
-------在这个示例中，我们创建了一个名为 myApp 的 AngularJS 应用程序，并创建了一个名为 myCtrl 的控制器。控制器中定义了一个名为 user 的对象和一个名为 fruits 的对象，分别用来保存表单中的用户名和密码、以及喜欢的水果。
我们还创建了一个名为 validate-email 的自定义指令，用来对输入的邮箱进行验证。在表单中，我们使用 ng-model 指令来绑定各个表单元素的值，并使用 validate-email 指令来对输入的邮箱进行验证。
最后，在页面底部，我们使用 AngularJS 的表达式语法来显示 user、fruits 和 email 对象的值，以验证 ng-model 是否能够正确地绑定表单中的数据。
总结
ng-model 是 AngularJS 中非常重要的一个指令，它可以将表单中的数据和作用域中的变量进行双向绑定，从而实现数据的实时更新。除了基本用法外，ng-model 还有一些高级用法，可以满足更复杂的需求。在实际开发中，我们应该尽可能地利用 ng-model 来简化表单的处理，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65f139ba2b3ccec22f9fc40b