新しいを創造する知恵
2016.05.05

AngularJS – STEP2

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


モデルを使う

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

・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/>
必須項目です。 半角英数のみで入力してください。 <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>
必須項目です。
</form>
・結果

参考文献