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

IT技术 javascript angularjs angularjs-directive angularjs-ng-model angularjs-ng-value
2021-02-15 09:32:33

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

5个回答

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

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

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

简单描述

ng模型

  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. ng-value如果您ng-model通过 ajax设置值而编写value属性不支持它,则确实提供了良好的绑定
  3. 基本上意味着在动态创建选项时使用radio&option标记select
  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>

...

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

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

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

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

ng-value="'hard'"

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

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

我在寻找ng-modelng-value之间的区别
2021-04-17 09:32:33
ngValue就是单向绑定,并且ngModel是双向绑定。
2021-04-20 09:32:33
请注意,'ng-value' 确实比硬编码元素属性 'value' 有优势,因为您可以指定非字符串类型。例如,'true' 和 'false' 将作为布尔值而不是字符串存储到模型中。
2021-05-05 09:32:33

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

从文档:

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

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

AngularJSng-value指令 API 参考

相反,从控制器初始化值:

不过那是设计使然。如果单选按钮的基础值发生变化,应该使用户的原始选择无效,则不会为他们神奇地选择它。只需考虑一个在存款和取款之间切换的单选按钮。如果用户选择存款以及用户界面如何将其更改为取款,那将是一个严重的问题。
2021-04-22 09:32:33
那不是文档所说的。它说不要在文本或文本区域上同时使用 ng-value 和 ng-model。对于收音机,检查,选项,一起使用非常好。
2021-05-04 09:32:33
即使在单选按钮的情况下,ng-value指令绑定的变量的更改也不会更新ng-model指令绑定的变量ng-value将仅更新其绑定变量当用户点击或选择该单选按钮。
2021-05-05 09:32:33
事实仍然是ng-model指令忽略了 AngularJS 框架对ng-value指令绑定的变量的更改ng-model指令仅对用户输入做出反应。
2021-05-14 09:32:33