web-dev-qa-db-ja.com

ng-modelとng-valueの違い/非互換性は何ですか？

私が理解している限り、ng-modelはモデルが割り当てられている特定の要素の値を設定します。 ng-valueはng-modelとどのように違うのでしょうか？

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

Ng-modelと連動します。無線および選択の場合、その項目が選択されたときにng-modelに設定される値です。要素の「value」属性の代替として使用します。これは、関連付けられたngモデルに常に文字列値を保存します。

ラジオボタンのコンテキストでは、非文字列値を使用できます。たとえば、値が「true」と「false」のラジオボタン「Yes」と「No」（または同等）がある場合-「value」を使用すると、ng-modelに保存される値は文字列になります。 「ng-value」を使用すると、ブール値のままになります。

ただし、select要素のコンテキストでは、ng-valueは常に文字列として扱われることに注意してください。選択に文字列以外の値を設定するには、ngOptionsを使用します。

26
JcT

簡単な説明

ng-model

  1. スコープとhtmlで使用できる変数の双方向バインディングに使用されます。
  2. $modelValue（値は実際のスコープ内にあります）＆$viewValue（ビューに表示される値）を持ちます。
  3. Name属性を持つフォームで言及した場合、angularは$ error、$ valid、$ invalidなどの検証属性を内部的に作成します。

例

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

ng-value

  1. input、select、textareaなどのそれぞれのng-model値に値を割り当てるために使用されます（ng-initを使用して同じことができます）
  2. ng-valueは、value属性の書き込みがサポートしていないときに、ajaxを介してng-model値を設定している場合、適切なバインディングを提供します。
  3. radioオプションを動的に作成するときに、基本的にoptionおよびselectタグに使用することを意図しています。
  4. string値のみを持つことができ、オブジェクト値をサポートしません。

[〜＃〜] html [〜＃〜]

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

[〜＃〜]または[〜＃〜]

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

...

13
Pankaj Parkar

inputフィールドでng-valueを使用するのは、変数にバインドしたいが、別の変数の値に基づいている場合です。例：

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

ユーザーがinputを入力すると、タイトルの値が更新されます。これが必要ない場合は、次のように変更できます。

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

theNewCodeは更新されますが、codeは変更されません。

3
Marcos Lima

https://docs.angularjs.org/api/ng/directive/ngValue 、ngValueによれば、入力要素のvalue属性に値がバインドされる角度式」。

したがって、ng-value = "hard"を使用すると、式として解釈され、値は$ scope.hard（おそらく未定義）にバインドされます。 ngValueは式を評価するのに便利です-ハードコードされた値を設定する値よりも利点はありません。ただし、ngValueを使用して値をハードコーディングする場合は、値を ''で囲む必要があります。

ng-value = "'hard'"

ng-modelはフォーム要素の内部に配置することを目的としており、双方向のデータバインディング（$ scope-> view and view-> $スコープ）例<input ng-model="val"/>.

または、ng-modelディレクティブは、HTMLコントロール（入力、選択、テキスト領域）の値をアプリケーションデータにバインドします。

2
ubaid ashraf

ドキュメントには、ng-valueとtwo-wayバインディングを行うときにng-modelを使用すべきでないことが明確に記載されています。

ドキュメントから：

ngValue

指定された式を要素の値にバインドします。

また、特定の式をinput[text]やtextareaなどの入力要素に一方向バインディングするために使用することもできますその要素が使用しない場合ngModel。

— AngularJS ng-valueディレクティブAPIリファレンス

代わりに、コントローラーからの値を初期化します。

0
georgeawg