angularjs中的`value`属性和`ng-value`属性有啥区别

Posted 2023-02-21

【中文标题】angularjs中的`value`属性和`ng-value`属性有啥区别

【英文标题】：What is the difference between `value` attribute and `ng-value` attributes in angularjsangularjs中的`value`属性和`ng-value`属性有什么区别

【发布时间】：2014-07-14 23:03:29

【问题描述】：

angularjs 模板中的value 和ng-value 属性有什么区别？如果我在使用值属性的字段上使用ng-if，它可以正常工作，但如果我将属性value 更改为ng-value，它将停止工作。

example 1  // it works 

<input type='radio' ng-model='difficulty' value='hard'/>
<div ng-if="difficulty == 'hard'">
     <p>difficulty is hard</p>
</div>  

Example 2 // it doesn't work

<input type='radio' ng-model='level' ng-value='hard'/>
<div ng-if= "level == 'hard'" >
     <p>level is hard</p>
</div>

【参考方案1】：

根据the docs，ngValue采用“角度表达式，其值将绑定到input元素的value属性” .

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

ng-value="'hard'"

---

更新： 从 v1.6 开始，ngValue 还将设置元素的value 属性（除了value 属性）。它可能不会影响您的用例，但这是另一个值得牢记的区别。

【讨论】：

好的，这意味着当我输入ng-value='hard' 时，它将搜索$scope.hard，但是当我输入`value='hard' 时，它会将值'hard' 分配给该字段。谢谢

ng-value=false 怎么样？在这种情况下，它被解释为字符串false 而不是scope.false。

当赋值给value属性时，它被解释为布尔false并转换为字符串。这取决于 Angular 的解析器是如何工作的。

@ExpertSystem 那么ng-value="someExpression" 与更简单的value=someExpression 有何不同？

@MarcusJuniusBrutus：大多数时候它不会（有一些非常细微的差异，这真的超出了这里的范围）。但话又说回来，我认为ng-value="someExpr" 比value=" someExpr " 更简单。基本上，只要我有一个要计算的表达式，我就会使用ngValue，当值是常量时，我​​会使用value。