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

Question

As far as i understood ng-model sets the value for that particular element in which the model is been assigned. given that how is ng-value different from ng-model?

Solution 1

It works in conjunction with ng-model; for radios and selects, it is the value that is set to the ng-model when that item is selected. Use it as an alternative to the 'value' attribute of the element, which will always store a string value to the associated ng-model.

In the context of radio buttons, it allows you to use non-string values. For instance, if you have the radio buttons 'Yes' and 'No' (or equivalent) with values 'true' and 'false' - if you use 'value', the values stored into your ng-model will become strings. If you use 'ng-value', they will remain booleans.

In the context of a select element, however, note that the ng-value will still always be treated as a string. To set non-string values for a select, use ngOptions.

Solution 2

Simple Description

ng-model

1. Is used for two way binding of variable that can be available on scope as well as on html.
2. which has $modelValue(value reside in actual scope) & $viewValue (value displayed on view).
3. If you mentioned on form with name attribute then angular internally creates validation attributes for it like $error, $valid, $invalid etc.

Eg.

<input type="text/checkbox/radio/number/tel/email/url" ng-model="test"/>

ng-value

1. Is used to assign value to respective ng-model value like input, select & textarea(same can be done by using ng-init)
2. ng-value does provide good binding if your are setting ng-model value through ajax while writing value attribute doesn't support it
3. Basically meant to use for radio & option tag while creating select options dynamically.
4. It can only have string value it, it doesn't support object value.

HTML

<input
  [ng-value="string"]>
...
</input>

OR

<select ng-model="selected">
  <option ng-value="option.value" ng-repeat="option in options">
     {{option.name}}
  </option>
</select>

...

Solution 3

A good use for ng-value in input fields is if you want to bind to a variable, but based on another variable's value. Example:

<h1>The code is {{model.code}}.</h1>
<p>Set the new code: <input type="text" ng-bind="model.code" /></p>

When the user types in the input, the value in the title will be updated. If you don't want this, you can modify to:

<input type="text" ng-value="model.code" ng-bind="model.theNewCode" />

theNewCode will be updated, but code will remain untouched.

Solution 4

According to the https://docs.angularjs.org/api/ng/directive/ngValue, 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'"

ng-model is intended to be put inside of form elements and has two-way data binding ($scope --> view and view --> $scope) e.g. <input ng-model="val"/>.

or you can say The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.

View more solutions

Comments

[Divya MV]

i was looking for the difference between ng-model and ng-value

[JcT]

Please note that 'ng-value' does have an advantage over hard-coding to the element attribute 'value', in that you can specify non-string types. For example, 'true' and 'false' will be stored to the model as booleans, rather than as strings.

[Michael R]

Also ngValue is a one-way binding, and ngModel is a two-way binding.

[chubbsondubs]

That's NOT what the documentation says. It say don't use both ng-value and ng-model on either text or textareas. For radio, check, option, it's perfectly fine to use together.

[georgeawg]

Even in the case of radio buttons, changes in the variable bound by the ng-value directive will not update the variable bound by the ng-model directive. The ng-value will only update its bound variable when the user clicks or selects that radio button.

[chubbsondubs]

That is by design though. If the underlying value of the radio button changes that should invalidate the user's original selection not magically select it for them. Just consider a radio button that shifts between deposit and withdraw. That would be a serious issue if the user selected deposit and some how the UI changed it to withdraw.

[georgeawg]

The fact remains that the ng-model directive ignores AngularJS framework changes to the variable bound by the ng-value directive. The ng-model directive only reacts to user input.