ng-model 和 ng-value 之间的 difference/incompatibility 是什么？

Question

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

Answer 1

根据 https://docs.angularjs.org/api/ng/directive/ngValue，ngValue 需要一个 "angular expression, whose value will be bound to the value attribute of the input element"。

因此，当您使用 ng-value="hard" 时，它被解释为一个表达式并且该值被绑定到 $scope.hard（这可能是未定义的）。 ngValue 对于计算表达式很有用——它在设置硬编码值方面没有 value 的优势。然而，如果你想用 ngValue 硬编码一个值，你必须将它包含在 '':

ng-值="'hard'"

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

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

Answer 2

与ng-model配合使用；对于收音机和 selects，它是 selected 时为 ng-model 设置的值。将其用作元素的 'value' 属性的替代项，该属性将始终将字符串值存储到关联的 ng-model.

在单选按钮的上下文中，它允许您使用非字符串值。例如，如果您的单选按钮 'Yes' 和 'No'（或等效项）的值为 'true' 和 'false' - 如果您使用 'value'，则存储的值进入你的 ng-model 将变成字符串。如果您使用 'ng-value'，它们将保持布尔值。

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

Answer 3

简单说明

ng-模型

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

例如

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

ng-值

用于给相应的ng-model值赋值，如input， select & textarea（同样可以使用 ng-init）

ng-model

value

ng-value 确实提供了良好的绑定
基本上意味着在动态创建 select 选项时使用 radio & option 标签。
只能有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 4

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 5

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

来自文档：

ngValue

Binds the given expression to the value of the element.

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

— AngularJS ng-value Directive API Reference

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

ng-model 和 ng-value 之间的 difference/incompatibility 是什么？

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

javascript

angularjs

angularjs-directive

angularjs-ng-model

angularjs-ng-value

ngValue