AngularJS:フォームの基本

goto_jp 1,053views 更新:2014年4月25日

サンプルはこちら。
http://codepen.io/KazuyoshiGoto/pen/IBvtr

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<body ng-app>
    <div ng-controller="mainCtrl">
    <form novalidate name="myForm" ng-submit="submitForm()">
      <input type="text" name="name" ng-model="user.name" placeholder="name" /><br />
      <input type="text" name="email" ng-model="user.email" placeholder="email" /><br />
      <input type="checkbox" name="check" ng-model="user.check" /><br />
      <input type="radio" name="radio" ng-model="user.radio" value="radio-1" />
      <input type="radio" name="radio" ng-model="user.radio" value="radio-2" /><br />
      <textarea name="textarea" ng-model="user.text"></textarea>
    </form> 
    <pre>{{user|json}}</pre>
  </div>
</body>

サンプル画面のフォームに適当に入力してみてください。
AngularJSで取得できる値の形が、8行目の指定にあるjsonの書式で表示されます。

JavaScript

var mainCtrl = function($scope) {
}

JS側は「mainCtrl」コントローラーの宣言をしているだけです。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません