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

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

提问人:Divya MV 提问时间:2/25/2015 最后编辑:R.J. DunnillDivya MV 更新时间:7/27/2019 访问量:60718

问:

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

javascript angularjs-ng-value

评论


答:

2赞 Ubaid Ashraf 2/25/2015 #1

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

因此,当您使用 ng-value=“hard” 时,它被解释为一个表达式,并且该值绑定到 $scope.hard(可能未定义)。 ngValue 对于计算表达式很有用 - 在设置硬编码值方面,它比 value 没有优势。然而,如果你想用 ngValue 对一个值进行硬编码,你必须把它括在 '' 中:

ng-value=“'硬'”

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

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

评论

1赞 Divya MV 2/25/2015
我一直在寻找 NG 模型NG 值之间的区别
0赞 JcT 2/25/2015
请注意,“ng-value”确实比对元素属性“value”进行硬编码具有优势,因为您可以指定非字符串类型。例如,“true”和“false”将作为布尔值而不是字符串存储到模型中。
1赞 Michael R 5/1/2017
也是单向绑定,并且是双向绑定。ngValuengModel
31赞 JcT 2/25/2015 #2

它与 ng-model 结合使用;对于 Radios 和 Selects,它是选择该项目时设置为 NG-Model 的值。将其用作元素的“value”属性的替代方法,该属性将始终将字符串值存储到关联的 ng-model 中。

在单选按钮的上下文中,它允许您使用非字符串值。例如,如果您的单选按钮“Yes”和“No”(或等效)值为“true”和“false”——如果您使用“value”,则存储在ng模型中的值将成为字符串。如果使用 'ng-value',它们将保持布尔值。

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

15赞 Pankaj Parkar 2/25/2015 #3

简单描述

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-modelinputselecttextareang-init)
  2. ng-value如果您通过 AJAX 设置值,而写入属性不支持它,则提供良好的绑定ng-modelvalue
  3. 基本上意味着在动态创建选项时使用 & 标记。radiooptionselect
  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>

...

3赞 Marcos Lima 7/29/2016 #4

如果要绑定到一个变量,但要基于另一个变量的值,则 in 字段的一个很好的用途。例:ng-valueinput

<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

0赞 georgeawg 7/27/2019 #5

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

从文档中:

ng值

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

它还可用于实现给定表达式与输入元素(如 an 或 a)的单向绑定,当该元素不使用 .input[text]textareangModel

AngularJS ng-value 指令 API 参考

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

评论

0赞 chubbsondubs 6/16/2020
文档不是这么说的。它说不要在文本或文本区域同时使用 ng-value 和 ng-model。对于收音机,检查,选项,一起使用是完全可以的。
0赞 georgeawg 6/18/2020
即使在单选按钮的情况下,对指令绑定的变量的更改也不会更新指令绑定的变量。仅当用户单击或选择该单选按钮时,才会更新其绑定变量。ng-valueng-modelng-value
0赞 chubbsondubs 6/20/2020
不过,这是设计使然。如果单选按钮的基础值发生更改,则该值应使用户的原始选择无效,而不是神奇地为他们选择它。只需考虑一个在存款和取款之间切换的单选按钮。如果用户选择存款以及 UI 如何将其更改为提款,那将是一个严重的问题。
0赞 georgeawg 6/21/2020
事实仍然是,该指令忽略了 AngularJS 框架对指令绑定的变量的更改。该指令仅对用户输入做出反应。ng-modelng-valueng-model