ng-model和ng-value有什么区别/不兼容之处？

Question

据我所了解，ng-model为指定的元素设置值。 那么，ng-value与ng-model有何不同?

- Divya MV

Answer 1

它与ng-model一起使用；对于单选按钮和选择器，它是在选择该项时设置为ng-model的值。将其用作元素'value'属性的替代品，后者始终会将字符串值存储到相关的ng-model中。

在单选按钮的上下文中，它允许您使用非字符串值。例如，如果您有单选按钮“是”和“否”(或等效)，其值为“true”和“false”-如果使用'value'，则存储到ng-model中的值将变为字符串。如果使用'ng-value'，则仍将保留布尔值。

但是，在选择器元素的上下文中，请注意ng-value仍将始终被视为字符串。要为选择器设置非字符串值，请使用ngOptions。

- JcT

Answer 2

简单说明

ng-model

1. 用于双向绑定变量，可在作用域和 html 中使用。
2. 其中包含 $modelValue（实际作用域中存在的值）和 $viewValue（在视图上显示的值）。
3. 如果您在表单中使用 name 属性，则 Angular 会自动生成验证属性，例如 $error、$valid、$invalid 等。

例如：

<input type="text/checkbox/radio/number/tel/email/url" ng-model="test"/>

ng-value

1. ng-value用于将值分配给相应的ng-model，例如input, select和textarea(也可以使用ng-init)。
2. 如果您通过ajax设置ng-model的值，则ng-value提供了很好的绑定方式，而编写value属性则不支持此功能。
3. 主要用于在动态创建select选项时，为radio和option标记使用。
4. ng-value只能具有string值，不支持对象值。

HTML

<input
  [ng-value="string"]>
...
</input>

或者

<select ng-model="selected">
  <option ng-value="option.value" ng-repeat="option in options">
     {{option.name}}
  </option>
</select>

...

- Pankaj Parkar

Answer 3

< p >在< input >字段中，使用< code >ng-value的一个好处是，如果你想绑定到一个变量，但是基于另一个变量的值。例如：

<h1>The code is {{model.code}}.</h1>
<p>Set the new code: <input type="text" ng-bind="model.code" /></p>

当用户输入input时，标题中的值将被更新。如果您不希望这样，可以进行修改：

<input type="text" ng-value="model.code" ng-bind="model.theNewCode" />

theNewCode 将会被更新，但是 code 将保持不变。

- Marcos Lima

Answer 4

根据https://docs.angularjs.org/api/ng/directive/ngValue，ngValue接受一个“angular表达式，其值将绑定到输入元素的value属性”。因此，当使用ng-value="hard"时，它被解释为表达式，并且该值绑定到$scope.hard（可能未定义）。ngValue用于评估表达式-它在设置硬编码值方面与value没有优势。然而，如果要使用ngValue硬编码一个值，必须将其括在''中：ng-value="'hard'" ng-model旨在放置在表单元素内，并具有双向数据绑定（$scope->视图和视图-> $scope），例如：<input ng-model="val"/>，或者你可以说ng-model指令将HTML控件（input、select、textarea）的值绑定到应用程序数据。

- ubaid ashraf

---

我正在寻找ng-model和ng-value之间的区别。 - Divya MV

请注意，与硬编码到元素属性“value”相比，“ng-value”确实具有优势，因为您可以指定非字符串类型。例如，“true”和“false”将作为布尔值而不是字符串存储到模型中。 - JcT

另外，ngValue是单向绑定，而ngModel是双向绑定。 - Michael R

Answer 5

文档明确指出，在使用 ng-model 进行双向绑定时，不应使用 ng-value。

来自文档：

ngValue

将给定的表达式绑定到元素的值。

它还可以用于将给定的表达式实现单向绑定到输入元素（如 input[text] 或 textarea），当该元素不使用 ngModel 时。

— AngularJS ng-value Directive API Reference

相反，应从控制器初始化该值：

- georgeawg

---

这不是文档所说的。文档说不要在文本或文本区域上同时使用ng-value和ng-model。对于单选框、复选框和选项，同时使用是完全可以的。 - chubbsondubs

即使在单选按钮的情况下，由 ng-value 指令绑定的变量发生更改也不会更新由 ng-model 指令绑定的变量。只有当用户点击或选择该单选按钮时，ng-value 才会更新其绑定的变量。 - georgeawg

这是有意为之的设计。如果单选按钮的基础值更改，应该使用户原始选择无效，而不是神奇地为其选择。只需考虑一个在存款和取款之间切换的单选按钮。如果用户选择存款，某种方式UI将其更改为提款，那将是一个严重的问题。 - chubbsondubs

事实仍然如此，ng-model 指令会忽略 AngularJS 框架对被 ng-value 指令绑定的变量所做的更改。ng-model 指令只对用户输入进行反应。 - georgeawg