2016.05.05

AngularJS – STEP2

AngularJSの基礎をまとめていきます。今回はモデルの作成、双方向データバインディング、フォームの作成を行います。

1 モデルを使う
- 1.1 双方向データバインディング
2 フォームを作る
- 2.1 テキストタイプ
- 2.2 セレクトボックス・ラジオボックス・チェックボックス
  - 2.2.1 ・HTML
  - 2.2.2 ・結果
3 参考文献
- - 3.0.1 １）Shaping up with Angular.js（アクセス日：2016.5.5）
  - 3.0.2 ２）AngularJS　アプリケーションプログラミング（2015年8月19日発売、山田祥寛　著、技術評論社）

モデルを使う

双方向データバインディング

・HTMLファイル

      <!DOCTYPE html>
      <html id="AngularJsSample" ng-app="sample2">
        <head>
          
          
          
          
          
        </head>
        <body>
          
            変数
            
            
            

            
            <div ng-cloak>初期値：{{::form1.variable}}</div>
            
            <div ng-cloak>暫定値：{{form1.variable}}</div>
          
        </body>
      </html>

・JavaScriptファイル：app.js

      (function(){
        //モジュールを定義する
        var app = angular.module('sample2',[]);
        
        //コントローラーを定義する
        app.controller('form1Controller', function(){
          this.variable = variable;
        });
        
        var variable = "initial@abc";
      })();

・結果

フォームを作る

テキストタイプ

・HTML

      
      
      <form name="form2" ng-controller="form2Controller as form2" novalidate>
        
          タイトル*
          
          必須項目です。
          6文字以上を入力してください。
          20文字以内で入力してください。
          
          
          
          <input name="title" id="title" class="form-control" ng-model="form2.container.title" type="text" placeholder="6文字以上20文字以内で入力" ng-minlength="6" ng-maxlength="20" required/>
        
        
          ユーザーID*
          必須項目です。
          半角英数のみで入力してください。
          
          <input name="userId" id="userId" class="form-control" ng-model="form2.container.userId" type="text" placeholder="半角英数で入力" ng-pattern="/^[a-zA-Z0-9]*$/" required/>
        
        
          メールアドレス*
          必須項目です。
          正しい形式で入力してください。
          
          <input name="mail" id="mail" class="form-control" ng-model="form2.container.email" type="email" placeholder="メールアドレスを入力" required/>
        
        
          
          
        
      </form>

・app.js

      //コントローラーを定義する
      app.controller('form2Controller', function(){
        //フォームで使用するモデルを用意する
        this.container = {};
      });

・結果

セレクトボックス・ラジオボックス・チェックボックス

・HTML

      <form name="form2" ng-controller="form2Controller as form2" novalidate>
        
          星*
          
          必須項目です。
          
          <select name="star" id="star" class="form-control" ng-model="form2.container.star" required>
            
            
            
            
          </select>
        
        
          
          性別*
          必須項目です。
          
            <label>男性</label>
          
          
            <label>女性</label>
          
          
            <label>その他</label>
          
        
        
          同意の確認*
          必須項目です。
          
            
            
            <input name="confirm" id="confirm" type="checkbox" ng-model="form2.container.confirm" ng-true-value="true" ng-false-value="false" required/>利用規約に同意します。
          
        
        
          
          
        
      </form>

・結果

参考文献

１）Shaping up with Angular.js（アクセス日：2016.5.5）
URL：http://campus.codeschool.com/courses/shaping-up-with-angular-js/intro
２）AngularJS　アプリケーションプログラミング（2015年8月19日発売、山田祥寛　著、技術評論社）
URL：http://gihyo.jp/book/2015/978-4-7741-7568-3#summary

AngularJS – STEP2

モデルを使う

双方向データバインディング

・HTMLファイル

・JavaScriptファイル：app.js

・結果

フォームを作る

テキストタイプ

・HTML

・app.js

・結果

セレクトボックス・ラジオボックス・チェックボックス

・HTML

・結果

参考文献

１）Shaping up with Angular.js（アクセス日：2016.5.5）

２）AngularJS　アプリケーションプログラミング（2015年8月19日発売、山田祥寛　著、技術評論社）

カテゴリー

おすすめの記事

AngularJS – STEP2

モデルを使う

双方向データバインディング

・HTMLファイル

・JavaScriptファイル：app.js

・結果

フォームを作る

テキストタイプ

・HTML

・app.js

・結果

セレクトボックス・ラジオボックス・チェックボックス

・HTML

・結果

参考文献

１）Shaping up with Angular.js（アクセス日：2016.5.5）

２）AngularJS アプリケーションプログラミング（2015年8月19日発売、山田祥寛 著、技術評論社）

関連記事

カテゴリー

おすすめの記事

２）AngularJS　アプリケーションプログラミング（2015年8月19日発売、山田祥寛　著、技術評論社）