web-dev-qa-db-fra.com

Quelle est la différence / incompatibilité entre ng-model et ng-value?

Autant que je sache, ng-model définit la valeur de cet élément particulier dans lequel le modèle a été affecté. Etant donné que la valeur de ng est différente de ng-model?

javascriptangularjsangularjs-directiveangularjs-ng-modelangularjs-ng-value
36
Divya MV

Cela fonctionne en conjonction avec ng-model; pour les radios et les sélections, il s’agit de la valeur définie pour le modèle-ng lorsque cet élément est sélectionné. Utilisez-le comme alternative à l'attribut 'value' de l'élément, qui stockera toujours une valeur de chaîne dans le modèle ng associé.

Dans le contexte des boutons radio, il vous permet d'utiliser des valeurs non-chaîne. Par exemple, si vous avez les boutons radio "Oui" et "Non" (ou l'équivalent) avec les valeurs "vrai" et "faux" - si vous utilisez "valeur", les valeurs stockées dans votre modèle ng deviendront des chaînes. Si vous utilisez 'ng-value', ils resteront des booléens.

Cependant, dans le contexte d'un élément select, notez que la valeur ng sera toujours traitée comme une chaîne. Pour définir des valeurs autres que des chaînes pour une sélection, utilisez ngOptions.

26
JcT

Description simple

ng-model

  1. Est utilisé pour la liaison bidirectionnelle d'une variable pouvant être disponible sur une portée aussi bien que sur un fichier HTML.
  2. qui a $modelValue (la valeur réside dans l'étendue réelle) & $viewValue (valeur affichée à l'écran).
  3. Si vous avez mentionné dans le formulaire avec l'attribut name alors angular crée en interne des attributs de validation tels que $ error, $ valid, $ invalid, etc.

Ex.

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

ng-value

  1. Est utilisé pour attribuer une valeur à ng-model valeur comme input, select & textarea (on peut faire la même chose en utilisant ng-init)
  2. ng-value fournit une bonne liaison si vous définissez ng-model valeur via ajax lors de l'écriture de l'attribut value ne le prend pas en charge
  3. Essentiellement destiné à utiliser la balise radio & option lors de la création dynamique des options select.
  4. Il ne peut avoir que string value, il ne supporte pas la valeur d'objet.

HTML 

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

OU 

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

...

13
Pankaj Parkar

Un bon usage pour ng-value dans input les champs sont si vous voulez vous lier à une variable, mais en fonction de la valeur d'une autre variable. Exemple:

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

Lorsque l'utilisateur saisit le input, la valeur dans le titre sera mise à jour. Si vous ne le souhaitez pas, vous pouvez modifier pour:

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

theNewCode sera mis à jour, mais code restera intact.

3
Marcos Lima

Selon le https://docs.angularjs.org/api/ng/directive/ngValue , ngValue prend un " expression angulaire, dont la valeur sera liée à l’attribut value de l’élément d’entrée ".

Ainsi, lorsque vous utilisez ng-value = "hard", il est interprété comme une expression et la valeur est liée à $ scope.hard (ce qui n’est probablement pas défini). ngValue est utile pour évaluer des expressions - il n'a aucun avantage sur la valeur pour définir des valeurs codées en dur. Cependant, si vous voulez coder une valeur avec ngValue, vous devez l'enfermer dans '':

ng-value = "'hard'"

ng-model est destiné à être placé à l'intérieur d'éléments de formulaire et possède une liaison de données bidirectionnelle ($ scope -> view and view -> $ portée) par exemple <input ng-model="val"/>.

ou vous pouvez dire que la directive ng-model lie la valeur des contrôles HTML (entrée, sélection, textarea) aux données de l'application.

2
ubaid ashraf

La documentation indique clairement que ng-value ne doit pas être utilisé lors de la liaison dans les deux sens avec ng-model.

De la documentation:

ngValue

Lie l'expression donnée à la valeur de l'élément.

Il peut également être utilisé pour obtenir la liaison à sens unique d'une expression donnée à un élément d'entrée tel qu'un input[text] ou textarea, lorsque cet élément n'utilise pas ngModel.

- AngularJS ng-value Référence API de la directive

Au lieu de cela, initialisez la valeur du contrôleur:

0
georgeawg