ngValue

Question

据我所知，ng-model设置了分配模型的特定元素的值。鉴于ng值与ng-model有何不同？

Answer 1

与ng-model结合使用;对于无线电和选择，它是在选择该项目时设置为ng-model的值。用它作为“价值”的替代品。元素的属性，它始终将字符串值存储到关联的ng模型中。

在单选按钮的上下文中，它允许您使用非字符串值。例如，如果你有单选按钮“是”＆＃39;和＆＃39;不＆＃39; （或同等的）价值观真实＆＃39;并且＆＃39; false＆＃39; - 如果您使用＆＃39; value＆＃39;，存储在ng-model中的值将成为字符串。如果你使用＆＃39; ng-value＆＃39;，它们将仍然是布尔值。

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

Answer 2

简单描述

ng-model

用于可在范围和html上使用的变量的双向绑定。
其中$modelValue（值位于实际范围内）＆amp; $viewValue（视图上显示的值）。
如果您在带有name属性的表单上提到，则angular会在内部创建验证属性，如$ error，$ valid，$ invalid等。

<强>例如

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

ng-value

用于为ng-model之类的input值分配值， select＆amp; textarea（使用ng-init）
ng-value确实提供了良好的约束力，如果您通过ajax设置ng-model值而写value属性并不支持
基本上用于radio＆amp;动态创建option选项时select标记。
它只能有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>

...

Answer 3

ng-value字段中input的一个好用途是，如果要绑定到变量，而是基于另一个变量的值。例如：

<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将保持不变。

Answer 4

根据https://docs.angularjs.org/api/ng/directive/ngValue， ngValue 采用＆＃34;角度表达式，其值将绑定到输入元素＆＃34;的值属性。

因此，当你使用ng-value =＆＃34; hard＆＃34;时，它被解释为一个表达式，并且该值绑定到$ scope.hard（可能是未定义的）。 ngValue对于计算表达式很有用 - 它对于设置硬编码值没有优势。但是，如果您想使用ngValue对值进行硬编码，则必须将其括在＆＃39;＆＃39;中：

纳克值=＆＃34;＆＃39;硬盘＆＃39;＆＃34;

ng-model 旨在放在表单元素中，并具有双向数据绑定（$ scope - ＆gt; view和view - ＆gt; $ scope），例如<input ng-model="val"/>.

或者你可以说 ng-model 指令将HTML控件（input，select，textarea）的值绑定到应用程序数据。

Answer 5

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

从文档中：

ngValue

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

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

— AngularJS ng-value Directive API Reference

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

什么是ng-model和ng-value之间的区别

5 个答案:

ngValue