Show_Hide

メッセージの「表示/非表示」を切り替えます。
Hello World!!!
World

こんにちわ

Hello World 完成！

次のリンクをクリックすると "ngp_show_hide.html" が呼び出されます。
"World" とタイプして下さい。
表示/非表示のプログラム

プログラムの説明

  1. AngularJS サンプルプログラム "ngp_show_hide.html" です。
    <!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
</head>

<body>
  Hello <span ng-bind="myModel"></span> !!!
  <div><input type="text" ng-model="myModel"></div>
 
  <div ng-show="myModel">こんにちわ</div>
  <div ng-hide="myModel">入力してください！</div>
  <div ng-if="myModel==='World'">Hello World 完成！</div>

</body>
</html>
  2. html で AngularJS を使用することを宣言します。
    head 内で "angular.min.js" を組み込みます。
    <html ng-app>
  3. input の ng-model で "myModel" を宣言します。
    宣言した "myModel" を div で参照しています。
    ng-show は "myModel" にタイプ入力された時に表示されます。
    ng-hide は "myModel" が空白の時に表示されます。
    ng-if は "myModel" が 'World' の時に表示されます。
      Hello <span ng-bind="myModel"></span> !!!
  <div><input type="text" ng-model="myModel"></div>
 
  <div ng-show="myModel">こんにちわ</div>
  <div ng-hide="myModel">入力してください！</div>
  <div ng-if="myModel==='World'">Hello World 完成！</div>

前田稔の超初心者のプログラム入門
超初心者のプログラム入門(JavaScript)