フォームの基本

フォームの基本


まずはユーザの名前を入れるようなフォームを作成する
※formタグ
type=""→sbumit 送信ボタンを作成
     →reset リセットボタンを作成
name=""→文字列 部品の名前を指定
value=""→文字列 ボタンに表示される文字列を指定

おさらい
ng-model・・・
ngModelは、Angularに相互のデータバインディングを行うように伝えるディレクティブ(指示文)です。これは、input、select、textarea、また、NgModelControllerを使用し、このディレクティブによって公開されたフォームのカスタム入力要素でも動作します。

<body>
  <h1>Angularの練習</h1>
   <div ng-controller="mainCtrl">
   <form name = "myName">
   <p>Name:<input type="text" name="name" ng-model="user.name"></p>
   <p><input type="submit" value="加えるボタン"></p>
   </form>
   </div>
</body>

ちょっとしたデバックのテクニックで以下を加える
<pre>{{user|json}}</pre>
これを加えることでリアルタイムにNameに格納された値が下記のように表示されるようになります

例.ああああを入力した場合
{
"name":"ああああ"

}


※<PRE>タグはPreformatted Text(整形済みテキスト) の略で、<PRE>~</PRE>で
囲まれた範囲のソースに記述されたスペース・改行などを、そのまま等幅フォントで表示します。
※jsonとは軽量のデータ交換フォーマットです(参考URL:http://json.org/json-ja.html)

<body>
  <h1>Angularの練習</h1>
   <div ng-controller="mainCtrl">
   <form name = "myName">
   <p>Name:<input type="text" name="name" ng-model="user.name"></p>
   <p><input type="submit" value="加えるボタン"></p>
   </form>
   <pre>{{user|json}}</pre>
   </div>
</body>

フォームがsubmitされたとき(送信されたとき、押下されたとき)をどうするか考える

ng-submitを作成し、メソッドaddUserを作る(4行目)

ng-submitとは・・・formがsubmitされた時のイベントハンドラとして使用するもの

例.
<body>
  <h1>Angularの練習</h1>
   <div ng-controller="mainCtrl">
   <form name = "myName" ng-submit="addUser()">
   <p>Name:<input type="text" name="name" ng-model="user.name"></p>
   <p><input type="submit" value="加えるボタン"></p>
   </form>
   <pre>{{user|json}}</pre>
   </div>
</body>

次にコントローラ(myscript.js)にaddUserの処理を記述していく
※様々な処理を行う場合はscope.addUserのfunction内に追加で記述していく
var mainCtrl = function($scope){
   $scope.addUser = function(){
    }
}

サンプルHTML

<!DOCTYPE html>
<html lang="ja" ng-app>
<head>
    <meta charaset="UTF-8">
     <title>Angularの練習だよん</title>
     <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
     <script src="myscript.js"></script>
</head>
<body>
  <h1>Angularの練習</h1>
   <div ng-controller="mainCtrl">
   <form name = "myName" ng-submit="addUser()">
   <p>Name:<input type="text" name="name" ng-model="user.name"></p>
   <p><input type="submit" value="add"></p>
   </form>
   <pre>{{user|json}}</pre>
   </div>
</body>
</html>

サンプルmyscript.js

var mainCtrl = function($scope){
   $scope.addUser = function(){
    }
}


  • 最終更新:2015-02-23 12:20:21

このWIKIを編集するにはパスワード入力が必要です

認証パスワード