javascript - ¿Cuál es la diferencia/incompatibilidad entre ng-model y ng-value?

ng-select

Question

Por lo que he entendido, ng-model establece el valor para ese elemento particular en el que se asigna el modelo. dado que ¿en qué se diferencia ng-value de ng-model?

Answer 1

De acuerdo con https://docs.angularjs.org/api/ng/directive/ngValue , ngValue toma una "expresión angular, cuyo valor estará vinculado al atributo de valor del elemento de entrada".

Entonces, cuando usa ng-value = "hard", se interpreta como una expresión y el valor está vinculado a $ scope.hard (que probablemente no está definido). ngValue es útil para evaluar expresiones: no tiene ninguna ventaja sobre el valor para establecer valores codificados. Sin embargo, si desea codificar un valor con ngValue, debe encerrarlo en '''':

ng-value = "''hard''"

ng-model está diseñado para colocarse dentro de elementos de formulario y tiene enlace de datos bidireccional ($ scope -> view y view -> $ scope), por ejemplo, <input ng-model="val"/>.

o puede decir que la directiva ng-model vincula el valor de los controles HTML (input, select, textarea) a los datos de la aplicación.

Answer 2

Descripción simple

ng-model

1. Se utiliza para el enlace bidireccional de variables que pueden estar disponibles en el alcance, así como en html.
2. que tiene $modelValue (el valor reside en el alcance real) y $viewValue (valor que se muestra en la vista).
3. Si mencionó en el formulario con el atributo de nombre, angular crea internamente atributos de validación para él como $ error, $ válido, $ inválido, etc.

P.ej.

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

ng-value

1. Se usa para asignar valor al valor ng-model respectivo como input , select & textarea (lo mismo se puede hacer usando ng-init )
2. ng-value proporciona un buen enlace si está configurando el valor de ng-model través de ajax mientras que escribir el atributo value no lo admite
3. Básicamente destinado a usarse para radio y etiqueta de option mientras se crean opciones de select dinámicamente.
4. Solo puede tener un valor de string , no admite el valor del objeto.

HTML

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

O

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

...

Answer 3

Funciona en conjunción con ng-model; para radios y selecciones, es el valor que se establece en el modelo ng cuando se selecciona ese elemento. Úselo como una alternativa al atributo ''valor'' del elemento, que siempre almacenará un valor de cadena en el modelo ng asociado.

En el contexto de los botones de opción, le permite usar valores que no sean cadenas. Por ejemplo, si tiene los botones de opción ''Sí'' y ''No'' (o equivalente) con los valores ''verdadero'' y ''falso'', si usa ''valor'', los valores almacenados en su modelo ng se convertirán en cadenas. Si usa ''ng-value'', seguirán siendo booleanos.

Sin embargo, en el contexto de un elemento select, tenga en cuenta que el valor ng siempre se tratará como una cadena. Para establecer valores que no sean cadenas para una selección, use ngOptions.

Answer 4

La documentación establece claramente que ng-value no debe usarse cuando se realiza un enlace bidireccional con ng-model .

De los documentos:

ngValue

Vincula la expresión dada al valor del elemento.

También se puede usar para lograr el enlace unidireccional de una expresión dada a un elemento de entrada como una input[text] o un área de textarea , cuando ese elemento no usa ngModel .

- https://docs.angularjs.org/api/ng/directive/ngValue

En su lugar, inicialice el valor del controlador:

Answer 5

Un buen uso de ng-value en input campos de input es si desea enlazar a una variable, pero en función del valor de otra variable. Ejemplo:

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

Cuando el usuario escribe la input , el valor en el título se actualizará. Si no desea esto, puede modificarlo para:

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

theNewCode se actualizará, pero el code permanecerá intacto.