问题
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?
回答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.
回答2:
Simple Description
ng-model
- Is used for two way binding of variable that can be available on scope as well as on html.
- which has
$modelValue
(value reside in actual scope) &$viewValue
(value displayed on view). - 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
- Is used to assign value to respective
ng-model
value likeinput
,select
&textarea
(same can be done by usingng-init
) ng-value
does provide good binding if your are settingng-model
value through ajax while writingvalue
attribute doesn't support it- Basically meant to use for
radio
&option
tag while creatingselect
options dynamically. - 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>
...
回答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.
回答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.
回答5:
The documentation clearly states that ng-value
should not be used when doing two-way binding with ng-model
.
From the Docs:
ngValue
Binds the given expression to the value of the element.
It can also be used to achieve one-way binding of a given expression to an input element such as an
input[text]
or atextarea
, when that element does not usengModel
.— AngularJS ng-value Directive API Reference
Instead, initialize the value from the controller:
来源:https://stackoverflow.com/questions/28717523/whats-the-difference-incompatibility-between-ng-model-and-ng-value