ng-ifとng-show/の違いを理解しようとしていますng-hideが、私には同じに見えます。
どちらか一方を使用するかどうかを選択する際に留意すべき違いはありますか?
ベストアンサー1
ngIf
ディレクティブngIfは、式に基づいて DOM ツリーの一部を削除または再作成しますngIf。割り当てられた式が false 値に評価された場合、要素は DOM から削除され、それ以外の場合は要素のクローンが DOM に再挿入されます。
<!-- when $scope.myValue is truthy (element is restored) -->
<div ng-if="1"></div>
<!-- when $scope.myValue is falsy (element is removed) -->
<div ng-if="0"></div>
を使用して要素が削除されると、ngIfそのスコープは破棄され、要素が復元されると新しいスコープが作成されます。 作成されたスコープは、ngIfプロトタイプ継承を使用して親スコープから継承します。
ngModelを親スコープで定義されたJavaScriptプリミティブにバインドするために使用する場合ngIf、子スコープ内の変数に加えられた変更は親スコープの値に影響を与えません。例:
<input type="text" ng-model="data">
<div ng-if="true">
<input type="text" ng-model="data">
</div>
この状況を回避し、子スコープ内から親スコープ内のモデルを更新するには、オブジェクトを使用します。
<input type="text" ng-model="data.input">
<div ng-if="true">
<input type="text" ng-model="data.input">
</div>
または、$parent親スコープ オブジェクトを参照する変数:
<input type="text" ng-model="data">
<div ng-if="true">
<input type="text" ng-model="$parent.data">
</div>
ng表示
ディレクティブngShowは、属性に指定された式に基づいて、指定された HTML 要素を表示または非表示にしますngShow。要素は、ng-hide要素から CSS クラスを削除または追加することによって表示または非表示になります。CSS.ng-hideクラスは AngularJS で事前定義されており、表示スタイルを none (!importantフラグを使用) に設定します。
<!-- when $scope.myValue is truthy (element is visible) -->
<div ng-show="1"></div>
<!-- when $scope.myValue is falsy (element is hidden) -->
<div ng-show="0" class="ng-hide"></div>
ngShow式が と評価されるとfalse、CSSng-hideクラスが要素の属性に追加され、要素が非class表示になります。 の場合true、ng-hideCSS クラスが要素から削除され、要素が非表示ではなくなります。