[解決済み】ng-ifとng-show/ng-hideの違いは何ですか？

質問

との違いを理解しようとしています。 ng-if と ng-show / ng-hide でも、私には同じに見えます。

どちらを使うか、注意すべき点はありますか？

どのように解決するのですか？

ngIf

は ngIf ディレクティブ を削除または再作成します。 は、式に基づく DOM ツリーの一部です。に割り当てられた式が ngIf が偽の値であった場合、その要素は 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 の中で使用されます。 ngIf を使用して親スコープで定義された JavaScript プリミティブにバインドすると、子スコープで変数に変更を加えても親スコープでの値には影響がありません。

<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>

ngShow

は ngShow ディレクティブ を表示または非表示にします。 に与えられた式に基づき、与えられた HTML 要素を表示します。 ngShow 属性で指定します。を削除または追加することで、要素を表示または非表示にします。 ng-hide CSS クラスを要素に追加します。このクラスは .ng-hide CSSクラスは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 とすると ng-hide CSSクラスは class 属性を指定すると、その要素が非表示になります。このとき true は、その ng-hide CSSクラスは要素から削除され、要素は非表示にならないようになります。