在 AngularJS 中，ng-model 和 ng-value 是两个常用的指令，它们都用于在 HTML 元素和 AngularJS 模型之间建立双向数据绑定关系。不过这两个指令有一些重要的区别，本文将详细介绍它们的异同点。
ng-model
ng-model 是 AngularJS 提供的一个指令，用于将表单元素（如输入框、下拉框等）中的值与模型进行双向绑定。当用户改变表单元素的值时，该值会自动更新到对应的模型变量中；反之，当模型变量的值发生改变时，表单元素的值也会相应地更新。
下面是一个简单的例子，演示了如何使用 ng-model 实现双向数据绑定：
---- -------------- -----------------------
------ ----------- ----------------
--------- -------------
------
--------
--- --- - ----------------------- ----
------------------------ ---------------- -
----------- - --------
---
---------上述代码中，我们定义了一个控制器 myCtrl，并在该控制器的作用域中定义了一个名为 name 的模型变量。在 HTML 中，我们使用 ng-model="name" 将一个输入框与 name 变量进行双向绑定；同时，使用插值表达式 {{name}} 将 name 变量的值展示在一个段落中。
运行该代码后，我们会看到一个输入框和一个段落。当我们在输入框中输入任意文本时，该文本会立即显示在段落中；反之，当我们改变段落中的文本时，输入框中的值也会相应地更新。
ng-value
与 ng-model 不同，ng-value 并不是用于绑定表单元素的值的指令，而是用于设置表单元素的值的指令。具体来说，ng-value 可以将模型变量的值赋给一个表单元素，例如：
---- -------------- -----------------------
------ ------------ ---------------- ----------------- ---
------ ------------ ---------------- ------------------- -----
------ ------------ ---------------- ------------------ ----
------
--------
--- --- - ----------------------- ----
------------------------ ---------------- -
------------ - ------
---
---------上述代码中，我们定义了三个单选按钮，每个按钮都使用 ng-model="color" 将其选中状态与 color 变量进行绑定。同时，我们使用 ng-value="'red'" 、ng-value="'green'" 和 ng-value="'blue'" 分别将这三个按钮的值设置为 red、green 和 blue。
在代码运行时，我们会看到第一个单选按钮被选中，并且 color 变量的值为 red。如果我们选择了其他的单选按钮，color 变量的值也会相应地更新。
需要注意的是，ng-value 只能用于一些特定的元素上，例如 input、select、option 等。对于其他的元素，ng-value 并没有任何效果。
总结
综上所述，ng-model 和 ng-value 在作用和使用方法上有很大的不同：
ng-model用于建立表单元素和模型之间的双向数据绑定关系；ng-value用于设置表单元素的值。
因此，
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/30135