What is the difference between `value` attribute and `ng-value` attributes in angularjs

Sarfraz Ahmad picture Sarfraz Ahmad · May 26, 2014 · Viewed 26.2k times · Source

What is the difference between value and ng-value attributes in angularjs templates? If I use ng-if on the field using value attribute it works properly but if I change the attribute value to ng-value it stops working.

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>

Answer

gkalpak picture gkalpak · May 26, 2014

According to the docs, ngValue takes an "angular expression, whose value will be bound to the value attribute of the input element".

So, when you use ng-value="hard", it is interpreted as an expression and the value is bound to $scope.hard (which is probably undefined).
ngValue is useful for evaluating expressions - it has no advantage over value for setting hard-coded values. Yet, if you want to hard-code a value with ngValue, you must enclose it in '':

ng-value="'hard'"

UPDATE:
Starting with v1.6, ngValue will also set the value property of the element (in addition to the value attribute). It might not affect your usecase, but it's another difference worth keeping in mind.