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

What's the difference/incompatibility between ng-model and ng-value?

提问by Divya MV

As far as i understood ng-model sets the value for that particular element in which the model is been assigned. given that how is ng-value different from ng-model?

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

采纳答案by JcT

It works in conjunction with ng-model; for radios and selects, it is the value that is set to the ng-model when that item is selected. Use it as an alternative to the 'value' attribute of the element, which will always store a string value to the associated ng-model.

它与 ng-model 一起工作；对于收音机和选择，它是在选择该项目时设置为 ng-model 的值。将其用作元素的 'value' 属性的替代，该属性将始终将字符串值存储到关联的 ng-model。

In the context of radio buttons, it allows you to use non-string values. For instance, if you have the radio buttons 'Yes' and 'No' (or equivalent) with values 'true' and 'false' - if you use 'value', the values stored into your ng-model will become strings. If you use 'ng-value', they will remain booleans.

在单选按钮的上下文中，它允许您使用非字符串值。例如，如果您的单选按钮“是”和“否”（或等效项）的值为“真”和“假”——如果您使用“值”，则存储在 ng-model 中的值将成为字符串。如果您使用 'ng-value'，它们将保持为布尔值。

In the context of a select element, however, note that the ng-value will still always be treated as a string. To set non-string values for a select, use ngOptions.

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

回答by Pankaj Parkar

Simple Description

简单描述

ng-model

ng模型

1. Is used for two way binding of variable that can be available on scope as well as on html.
2. which has $modelValue(value reside in actual scope) & $viewValue(value displayed on view).
3. If you mentioned on form with name attribute then angular internally creates validation attributes for it like $error, $valid, $invalid etc.

1. 用于变量的双向绑定，可以在作用域和 html 上使用。
2. 其中具有$modelValue（值驻留在实际范围内）& $viewValue（显示在视图中的值）。
3. 如果你在表单上提到了 name 属性，那么 angular 会在内部为它创建验证属性，比如 $error、$valid、$invalid 等。

Eg.

例如。

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

ng-value

ng值

1. Is used to assign value to respective ng-modelvalue like input, select& textarea(same can be done by using ng-init)
2. ng-valuedoes provide good binding if your are setting ng-modelvalue through ajax while writing valueattribute doesn't support it
3. Basically meant to use for radio& optiontag while creating selectoptions dynamically.
4. It can only have stringvalue it, it doesn't support object value.

1. 用于为相应的ng-model值赋值，如input, select& textarea（同样可以通过使用来完成ng-init）
2. ng-value如果您ng-model通过 ajax设置值而编写value属性不支持它，则确实提供了良好的绑定
3. 基本上意味着在动态创建选项时使用radio&option标记select。
4. 它只能有string值，它不支持对象值。

HTML

HTML

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

OR

或者

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

...

...

回答by Marcos Lima

A good use for ng-valuein inputfields is if you want to bind to a variable, but based on another variable's value. Example:

ng-valueininput字段的一个很好的用途是如果您想绑定到一个变量，但基于另一个变量的值。例子：

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

When the user types in the input, the value in the title will be updated. If you don't want this, you can modify to:

当用户输入 时input，标题中的值将被更新。如果你不想要这个，你可以修改为：

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

theNewCodewill be updated, but codewill remain untouched.

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

回答by ubaid ashraf

According to the https://docs.angularjs.org/api/ng/directive/ngValue, ngValuetakes an "angular expression, whose value will be bound to the value attribute of the input element".

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

So, when you use ng-value="hard", it is interpreted as an expression and the value is bound to $scope.hard (which is probably undefined). ngValue is useful for evaluating expressions - it has no advantage over value for setting hard-coded values. Yet, if you want to hard-code a value with ngValue, you must enclose it in '':

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

ng-value="'hard'"

ng-value="'hard'"

ng-modelis intended to be put inside of form elements and has two-way data binding ($scope --> view and view --> $scope) e.g. <input ng-model="val"/>.

ng-model旨在放置在表单元素内部，并具有双向数据绑定（$scope --> 视图和视图 --> $scope）例如<input ng-model="val"/>.

or you can say The ng-modeldirective binds the value of HTML controls (input, select, textarea) to application data.

或者您可以说ng-model指令将 HTML 控件（输入、选择、文本区域）的值绑定到应用程序数据。

回答by georgeawg

The documentation clearly states that ng-valueshould not be used when doing two-waybinding with ng-model.

该文件明确指出，ng-value这样做的时候，不应使用双向与结合ng-model。

From the Docs:

从文档：

ngValue

Binds the given expression to the value of the element.

It can also be used to achieve one-waybinding of a given expression to an input element such as an input[text]or a textarea, when that element does not usengModel.

— AngularJS ng-valueDirective API Reference

值

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

它也可以被用于实现单向给定表达式的输入元件，如结合input[text]或textarea，当该元素不使用ngModel。

— AngularJSng-value指令 API 参考

Instead, initialize the value from the controller:

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