<h1>Example: ngShow / ngHide</h1>
<p>ngShowは値の評価がtrueであれば内包する要素を表示します。ngHideは評価がtrueであれば要素を非表示にします。</p>
<div ng-app ng-init="isShow=false">
  <input type="checkbox" id="showBox" ng-model="isShow">
  <label for="showBox">表示する</label>
  
  <div ng-show="isShow">
    ngShow: true
  </div>
  
  <div ng-hide="isShow">
    ngHide: true
  </div>
</div>
@import "bourbon";

body {
  padding: 1.5rem;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js