ngIf

http://docs.angularjs.org/api/ng.directive:ngIf

概要
使用方法
デモ

概要

ngIfディレクティブは、{式}に基づくDOMツリーの一部を削除または再作成します。もし、ngIfに割り当てられている式がfalseの値になると、要素はDOMから削除され、そうでなければ要素の複製がDOM内に再挿入されます。

ngIfがngShowとngHideと異なるのは、 CSSプロパティのdisplayを通して表示を切り替えるのではなく、ngIfは完全に要素を削除したり、またDOM内に要素を再作成する事です。 DOM内の要素の場所に依存した:first-childまたは:last-childのような擬似セレクタを使用するケースで、この違いが大きな意味を持つことになります。

ngIfを使用して要素が削除されると、そのスコープが削除され、要素が再度作成されると新しいスコープが作成されることに注意してください。スコープはngIfによって、プロトタイプ継承を使用して親のスコープを継承して作成されます。もし、ngModelがngIf内で使用されていた場合は、親スコープ内で定義されたJavaScriptのプリミティブと紐づくため、重要な影響を及ぼします。この場合、子スコープ内の変数に対して行われた変更は、親スコープ内の値(非表示)を上書きします。

ngIfはまた、コンパイルされた際の状態を使用した、要素の再作成も行います。この挙動の例として、例えば要素のクラス属性がコンパイル後に、 jQueryの.addClass()のようなメソッドを使用して動的に変更され、その後に要素が削除されたような場合です。 ngIfが要素を再作成する際に、元のコンパイルされた状態が要素の再作成に使用されるため、追加されたクラスは失われます。

更に、ngAnimateモジュールを通して作成される時と削除される時のアニメーションを提供する事が可能です。

使用方法

<要素 ng-if="{expression}">
   ...
</要素>

ディレクティブ情報

このディレクティブは、新しいスコープを作成します。

アニメーション

enter: ngIfの内容が変更された直後に発生します。新しいDOM要素が作成され、ngIfのコンテナに注入されます。
leave: ngIfの内容がDOMから削除される直前に発生します。

Click here to learn more about the steps involved in the animation.

引数

引数	説明
ngIf	型：`式` もし、式がfalseであれば要素がDOMツリーから削除されます。もし、式がtrueであればコンパイルされた要素が複製され、DOMツリーに追加されます。

<!doctype html>
<html ng-app="ngAnimate">
  <head>
    <link rel="stylesheet" type="text/css" href="animation.css">
    <script src="http://code.angularjs.org/1.2.4/angular.min.js"></script>
    <script src="http://code.angularjs.org/1.2.4/angular-animate.min.js"></script>
  </head>
  <body>
    Click me: <input type="checkbox" ng-model="checked" ng-init="checked=true" /><br/>
    Show when checked:
    <span ng-if="checked" class="animate-if">
      I'm removed when the checkbox is unchecked.
    </span>
  </body>
</html>

.animate-if {
  background:white;
  border:1px solid black;
  padding:10px;
}

/*
  The transition styles can also be placed on the CSS base class above
*/
.animate-if.ng-enter, .animate-if.ng-leave {
  -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
}

.animate-if.ng-enter,
.animate-if.ng-leave.ng-leave-active {
  opacity:0;
}

.animate-if.ng-leave,
.animate-if.ng-enter.ng-enter-active {
  opacity:1;
}

<!doctype html>
<html ng-app="ngAnimate">
  <head>
<style type="text/css">.animate-if {
  background:white;
  border:1px solid black;
  padding:10px;
}

/*
  The transition styles can also be placed on the CSS base class above
*/
.animate-if.ng-enter, .animate-if.ng-leave {
  -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
}

.animate-if.ng-enter,
.animate-if.ng-leave.ng-leave-active {
  opacity:0;
}

.animate-if.ng-leave,
.animate-if.ng-enter.ng-enter-active {
  opacity:1;
}
</style>
    <script src="http://code.angularjs.org/1.2.4/angular.min.js"></script>
    <script src="http://code.angularjs.org/1.2.4/angular-animate.min.js"></script>
  </head>
  <body>
    Click me: <input type="checkbox" ng-model="checked" ng-init="checked=true" /><br/>
    Show when checked:
    <span ng-if="checked" class="animate-if">
      I'm removed when the checkbox is unchecked.
    </span>
  </body>
</html>

このページは、ページトップのリンク先のAngularJS公式ドキュメント内のページを翻訳した内容を基に構成されています。下記の項目を確認し、必要に応じて公式のドキュメントをご確認ください。もし、誤訳などの間違いを見つけましたら、 @tomofまで教えていただければ幸いです。

AngularJSの更新頻度が高いため、元のコンテンツと比べてドキュメントの情報が古くなっている可能性があります。
"訳注:"などの断わりを入れた上で、日本人向けの情報やより分かり易くするための追記を行っている事があります。