Show_Hide

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

次のリンクをクリックすると "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)