フォームの基本
フォームの基本
まずはユーザの名前を入れるようなフォームを作成する
※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