AngularJS 是一个流行的前端框架，它采用了 MVVM（Model-View-ViewModel）模式，其中 View 层负责呈现数据，而 ViewModel 层则扮演了协调 View 和 Model 之间通信的角色。在 AngularJS 中，ng-model 指令是实现 ViewModel 和 View 绑定的关键之一。
什么是 ng-model 指令？
在 AngularJS 中，ng-model 指令用于在表单元素（如 input、select 和 textarea 等）和作用域中创建双向数据绑定。它将表单的值与指定的作用域属性绑定起来，当表单的值改变时，作用域属性的值也随之改变，并且当作用域属性的值发生改变时，表单的值也会相应地更新。
如何使用 ng-model 指令？
安装 AngularJS
如果你还没有安装 AngularJS，可以通过以下方式安装：
------- ------------------------------------------------------------------------------------
使用 ng-model 指令
使用 ng-model 指令非常简单，只需要将指令绑定到表单元素上，并将其值绑定到作用域属性即可。例如，我们可以在输入框中使用 ng-model 指令来绑定 $scope.name 属性：
---- -------------- -----------------------
------ ----------- ----------------
-------- -------------
------
--------
--- --- - ----------------------- ----
------------------------ ---------------- -
----------- - ----- -----
---
---------在上述代码中，我们使用 ng-model 指令将输入框和 $scope.name 属性绑定起来，当输入框的值发生改变时，$scope.name 的值也会相应地更新。而在 <p> 标签中，我们使用双括号语法展示了 $scope.name 的值。
绑定到对象属性
我们也可以使用点（.）语法来绑定表单元素的值到对象属性上。例如：
---- -------------- -----------------------
------
----- ----- ------ ----------- ------------------------------
---- ----- ------ ----------- -----------------------------
----
---- ----- ---------------- - - - - ---------------
-------
------
--------
--- --- - ----------------------- ----
------------------------ ---------------- -
----------- - ----------- ------- --------- -------
---
---------在上述代码中，我们将表单元素的值和一个名为 user 的对象的 firstName 和 lastName 属性绑定起来。当表单元素的值或者对象属性的值改变时，视图中的 Full Name 字段会实时刷新。
注意事项
- ng-model 指令只能用于表单元素上。
- 无论是绑定到普通作用域属性还是对象属性，在表单元素被删除时，对应的作用域属性也会被销毁。
结论
通过本文的介绍，我们可以发现，ng-model 指令确实是 AngularJS 中非常重要的指令之一。它实现了表单与 ViewModel 和 Model 的双向绑定，并极大地简化了前端开发中关于数据交互的复杂度。我们需要注意的是，它只作用于表单元素上，并且在不需要使用时进行清除。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6729f06eddd3a70eb6cec2f6