その他のフォームの部品2

チェックボックスを作成する


例.18歳以上かどうか調べるためのチェックボックスの作成
  <p>18+:
   <input type="checkbox" ng-model="user.adult">
   </p>
上記を実行するとチェックを入れるとtrue、入れないとfalseの値が返ってきます

trueとfalseのときで値を指定したい場合は
ng-true-value="任意のメッセージ"
ng-false-value="任意のメッセージ" を使用する

例.
  <p>18歳以上なの?
   <input type="checkbox" ng-model="user.adult" ng-true-value="君はもう立派な大人だ!"
    ng-false-value="フッ青二才めが!!">
   </p>

ラジオボタンを作成する

input type ="radio"を使用する

例.
  <p>電話何持ってる?
   <input type="radio" ng-model="user.phone" value="iPhone"> iPhone
   <input type="radio" ng-model="user.phone" value="Android"> Android
   </p>
※modelをuser.phoneと同じにするとラジオボタンのグループ化がされます

テキストエリアを作成する

140字以内のテキストエリアを作成する

例.
  <p>入力欄だぜ
   <textarea ng-model="user.memo" ng-maxlength="140"></textarea>
   </p>

残り文字数がカウントされるような実装をする場合
{{140-user.memo.length}}を付け加える

例.
  <p>入力欄だぜ
   <textarea ng-model="user.memo" ng-maxlength="140"></textarea>{{140-user.memo.length}}
   </p>

サンプル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 novalidate name = "myForm" ng-submit="addUser()">
   <p>18歳以上です?
   <input type="checkbox" ng-model="user.adult" ng-true-value="君はもう立派な大人だ!" ng-false-value="フッ青二才めが!!">
   </p>
   <p>電話は何もってるんじゃいっ
   <input type="radio" ng-model="user.phone" value="iPhone"> iPhone
   <input type="radio" ng-model="user.phone" value="Android"> Android
   </p>
   <p>入力欄だってばよ
   <textarea ng-model="user.memo" ng-maxlength="140"></textarea>{{140-user.memo.length}}
   </p>
   </form>

  <pre>{{user|json}}</pre>
   </div>
</body>
</html>

サンプルmyscript

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

  • 最終更新:2015-02-28 02:32:54

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

認証パスワード