Angularのネイティブ指示では、これらの指示は、要素が表示されるかどうか、NG-Show/ng-hide/ng-ifおよびng-switchを制御するために使用されます。
また、角度パフォーマンスの最適化でもよく使用します。
それらの違いを見てみましょう。
その中で、NG-ShowとNg-Hideは同じですが、NG-Showが出会ったときに条件を表示し、Ng-Hideが出会ったときに条件を隠します。以下のng-hideについては言及しません。
ng-show
NG-Showによって受信されたブール値は、TrueがDomノードを表示するようにトリガーされます。 ng-showの値がfalseの場合、ng-hideのクラスがdomノードに追加され、このクラスの表現は「表示:なし」です。 DOMがロードすると、NG-Showのすべてのノードがロードされます。つまり、ng-showはDOMノードのみを隠して表示します。これは、NG-Show命令にオイルが多すぎる場合、たとえそれを表示しなくても、それらがあるDOMノードがまだレンダリングされることを意味します。
ng-if
ng-ifもブール値を受け取ります。その値が偽の場合、それが制御するノードが作成されないか、以前のDOMノードが破壊されます。このノードに多くのngバインディングが含まれていても、実行されません。したがって、プロジェクト開発では、DOMを一度にロードする必要がない場合は、NG-IFを使用してNGイベントが発生するのを防ぐことができ、DOMの負荷速度を高速化できます。特に繰り返すとき、各データに複雑なデータ構造が含まれている場合、効果は特に明白です。その値が真の場合、DOMノードが作成されます。
したがって、クリックしてリスト項目の詳細情報を表示するなどの追加情報をレンダリングするために手順とテンプレートを使用する場合は、必ずNG-IF(AngularJSV。1.1.5以降)を使用してください。レンダリングをブロックします(NG-Showと比較して)。
ng-switch
Ng-Switchの存在は、私たちに多くのトラブルを救います(Angular自体はこのようなものだと言うべきです)。たとえば、従来の方法を使用してタブタブを作成しました。何度も何度もループしてから、現在の状態を判断してから、対応するものを実行する必要があります。 AngularでNg-Switchを使用することは非常に簡単です。 Ng-Switchは、最初に特定の変数と、変数が評価されたときに以下に表示されるコンテンツを聴く必要があります。上記のように、タイプのような変数を聞くとき、タイプの値が「AAA」に等しい場合、この領域は作成および表示されます。タイプの値が「BBB」に等しい場合、以前の「AAA」のすべてのDOMが破壊され、すべての「BBB」ドムが作成および表示されます。
例http://jsbin.com/hinehi/1/edit