428

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

どちらを使用するかを選択する際に留意すべき違いはありますか?

4

12 に答える 12

37

ng-ifディレクティブはページからコンテンツを削除しng-show/ng-hide、CSSdisplayプロパティを使用してコンテンツを非表示にします。

:first-childこれは、スタイルに:last-child疑似セレクターを使用する場合に便利です。

于 2013-10-04T09:34:31.743 に答える
5

@Gajus Kuizinas と @CodeHater は正しいです。ここでは、例を挙げているだけです。ng-if を使用しているときに、割り当てられた値が false の場合、html 要素全体が DOM から削除されます。割り当てられた値が true の場合、html 要素は DOM で表示されます。また、スコープは親スコープとは異なります。ただし、ng-show の場合は、割り当てられた値に基づいて要素を表示および非表示にするだけです。しかし、それは常に DOM にとどまります。割り当てられた値に従って可視性のみが変化します。

http://plnkr.co/edit/3G0V9ivUzzc8kpLb1OQn?p=preview

この例がスコープを理解するのに役立つことを願っています。ng-show と ng-if に false の値を与えてみて、コンソールで DOM を確認してください。入力ボックスに値を入力してみて、違いを観察してください。

<!DOCTYPE html>

こんにちはプランカー！

<input type="text" ng-model="data">
<div ng-show="true">
    <br/>ng-show=true :: <br/><input type="text" ng-model="data">
</div>
<div ng-if="true">
    <br/>ng-if=true :: <br/><input type="text" ng-model="data">
</div> 
{{data}}

于 2014-11-18T04:33:04.717 に答える
0

注意するために、今私に起こったこと: ng-show は css を介してコンテンツを非表示にしますが、ボタンであるはずの div で奇妙な不具合が発生しました。

下部に 2 つのボタンがあるカードがあり、実際の状態に応じて 1 つが 3 番目の例と交換され、新しいエントリを含む編集ボタンが表示されます。ng-show=false を使用して左側のボタン (ファイルの最初に存在) を非表示にすると、次のボタンがカードの外側の右側の境界線で終了することがありました。ng-if は、コードをまったく含めないことでそれを修正します。(ng-show の代わりに ng-if を使用していくつかの隠された驚きがあるかどうかをここで確認しました)

于 2017-01-27T11:44:16.993 に答える