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

Question

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

Answer 1

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

来自文档：

ngValue

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

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

——AngularJS ng-value Directive API Reference

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

Answer 2

input 字段中的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 将保持不变。

Answer 3

简单说明

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 值

1. 用于将值分配给各个ng-model 值，例如input， select & textarea（同样可以使用ng-init）
2. 如果您通过 ajax 设置 ng-model 值而编写 value 属性不支持它，ng-value 确实提供了良好的绑定
3. 基本上意味着在动态创建select 选项时用于radio 和option 标记。
4. 只能有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-model 结合使用；对于 radios 和 selects，它是在选择该项目时设置为 ng-model 的值。使用它作为元素的 'value' 属性的替代品，它将始终将字符串值存储到关联的 ng-model。

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

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

Answer 5

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

因此，当您使用 ng-value="hard" 时，它被解释为一个表达式，并且该值绑定到 $scope.hard（这可能是未定义的）。 ngValue 对于评估表达式很有用——它对设置硬编码值的 value 没有任何优势。然而，如果你想用 ngValue 硬编码一个值，你必须用 '' 括起来：

ng-value="'hard'"

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

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