ngShow

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

概要
ngShowのアニメーションに関する注意
使用方法
デモ

概要

ngShowディレクティブは、ngShow属性に提供された式を元に、HTML要素を表示または非表示にします。要素は要素上のng-hideのCSSクラスを削除または追加されることによって、表示と非表示が切り替えられます。 .ng-hideCSSクラスはAngularJSによって予め定義されており、displayスタイルにnoneが設定されています。 (!importantフラグが指定されています。)

<!-- $scope.myValue がtrueの場合 (要素は表示されます) -->
<div ng-show="myValue"></div>

<!-- $scope.myValue がfalseの場合 (要素は隠されます) -->
<div ng-show="myValue" class="ng-hide"></div>

ngShowの式がfalseと評価されると、.ng-hideCSSクラスが追加され、要素が非表示になります。 trueの場合は、.ng-hideCSSクラスが削除され、要素が表示されます。

何故、!importantを使用するのか?

あなたは、何故.ng-hideCSSクラスに!importantが使用されるのか、不思議に思ったかもしれません。これは、.ng-hideセレクタが、それより重みのあるセレクタに簡単に上書きされてしまうためです。例えば、HTMLリスト項目上のdisplayスタイルを変更すると、隠れていた要素が表示されてしまいます。これは、CSSフレームワークを扱う際にも大きな問題になります。

!importantを使用することによって、CSSセレクタの指定が衝突しても、表示／非表示を期待したとおりに動作させる事が出来ます。 (スタイルの衝突では、!importantは使用されません) もし開発者が、要素の非表示方法についてのスタイルを、上書き変更する事を選択するのであれば、自身のCSSコード内で!importantを使用して、それを行います。

.ng-hideの上書き

もし、ngShow/ngHideの非表示の挙動を変更したい場合は、CSSの.ng-hideのスタイル定義し直すことで、それを行うことが可能です。

.ng-hide {

display:block!important;

  //非表示要素の別の形式です
  position:absolute;
  top:-9999px;
  left:-9999px;
}

CSSの上書きが機能するように、!importantフラグを含める事を忘れないで下さい。

ngShowのアニメーションに関する注意

ディレクティブの式がtrue/falseに変更された際にトリガされる表示/非表示イベントの際に、 ngShow/ngHideのアニメーションが動作します。要素が非表示に移行する際のアニメーションを実現するために、 !importantフラグをdisplayプロパティを上書きするために含めなければならない事を除き、この仕組みは、ngClassのアニメーションの仕組みのように動作します。

//
// このページの下部に、デモがあります
//
.my-element.ng-hide-add, .my-element.ng-hide-remove {
  transition:0.5s linear all;
  display:block!important;
}

.my-element.ng-hide-add { ... }
.my-element.ng-hide-add.ng-hide-add-active { ... }
.my-element.ng-hide-remove { ... }
.my-element.ng-hide-remove.ng-hide-remove-active { ... }

使用方法

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

アニメーション

addClass:: .ng-hide -
ngShow式がtrue値と評価された後、コンテンツに「表示」が設定される直前に発生します。
removeClass:: .ng-hide -
.ngShow式がtrue値では無いと評価された後、コンテンツに「非表示」が設定される直前に発生します。

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

引数

引数説明

ngShow

引数	説明
ngShow	型：`式` 式がtrueなら要素を表示し、falseなら非表示にします。

型：式

式がtrueなら要素を表示し、falseなら非表示にします。

デモ

<!doctype html>
<html ng-app="ngAnimate">
  <head>
    <link rel="stylesheet" type="text/css" href="animation.css">
    <script src="http://code.angularjs.org/1.2.3/angular.min.js"></script>
    <script src="http://code.angularjs.org/1.2.3/angular-animate.min.js"></script>
  </head>
  <body>
    Click me: <input type="checkbox" ng-model="checked"><br/>
    <div>
      Show:
      <div class="check-element animate-show" ng-show="checked">
        <span class="icon-thumbs-up"></span> I show up when your checkbox is checked.
      </div>
    </div>
    <div>
      Hide:
      <div class="check-element animate-show" ng-hide="checked">
        <span class="icon-thumbs-down"></span> I hide when your checkbox is checked.
      </div>
    </div>
  </body>
</html>

.animate-show {
  -webkit-transition:all linear 0.5s;
  transition:all linear 0.5s;
  line-height:20px;
  opacity:1;
  padding:10px;
  border:1px solid black;
  background:white;
}

.animate-show.ng-hide-add,
.animate-show.ng-hide-remove {
  display:block!important;
}

.animate-show.ng-hide {
  line-height:0;
  opacity:0;
  padding:0 10px;
}

.check-element {
  padding:10px;
  border:1px solid black;
  background:white;
}

it('should check ng-show / ng-hide', function() {
  expect(element('.doc-example-live span:first:hidden').count()).toEqual(1);
  expect(element('.doc-example-live span:last:visible').count()).toEqual(1);

  input('checked').check();

  expect(element('.doc-example-live span:first:visible').count()).toEqual(1);
  expect(element('.doc-example-live span:last:hidden').count()).toEqual(1);
});

<!doctype html>
<html ng-app="ngAnimate">
  <head>
<style type="text/css">.animate-show {
  -webkit-transition:all linear 0.5s;
  transition:all linear 0.5s;
  line-height:20px;
  opacity:1;
  padding:10px;
  border:1px solid black;
  background:white;
}

.animate-show.ng-hide-add,
.animate-show.ng-hide-remove {
  display:block!important;
}

.animate-show.ng-hide {
  line-height:0;
  opacity:0;
  padding:0 10px;
}

.check-element {
  padding:10px;
  border:1px solid black;
  background:white;
}
</style>
    <script src="http://code.angularjs.org/1.2.3/angular.min.js"></script>
    <script src="http://code.angularjs.org/1.2.3/angular-animate.min.js"></script>
  </head>
  <body>
    Click me: <input type="checkbox" ng-model="checked"><br/>
    <div>
      Show:
      <div class="check-element animate-show" ng-show="checked">
        <span class="icon-thumbs-up"></span> I show up when your checkbox is checked.
      </div>
    </div>
    <div>
      Hide:
      <div class="check-element animate-show" ng-hide="checked">
        <span class="icon-thumbs-down"></span> I hide when your checkbox is checked.
      </div>
    </div>
  </body>
</html>

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

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