その他のフォームの部品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