AngularJS

by hira3

HTML

<h1>AngularJS</h1>

<div ng-app="myApp" ng-controller="FormComtroller as formCtrl">
<div class="readout">
    <h3>Module の値</h3>
    <table>
        <tr>
            <td class="label">テキスト値:</td>
            <td>{{formCtrl.stringValue}}</td>
        </tr>
        <tr>
            <td class="label">パスワード:</td>
            <td>{{formCtrl.passwordValue}}</td>
        </tr>
        <tr>
            <td class="label">真偽値:</td>
            <td>{{formCtrl.booleanValue}}</td>
        </tr>
        <tr>
            <td class="label">選択された値:</td>
            <td>{{formCtrl.selectedOptionValue}}</td>
        </tr>
        <tr>
            <td class="label">選択された値 (複数選択):</td>
            <td>{{formCtrl.multipleSelectedOptionValues}}</td>
        </tr>
        <tr>
            <td class="label">ラジオボタンの選択された値:</td>
            <td>{{formCtrl.radioSelectedOptionValue}}</td>
        </tr>
    </table>
</div>
  
<h3>Form 部品</h3>
<table>
    <tr>
        <td class="label">テキスト値 (タイプ時に更新):</td>
        <td><input ng-model="formCtrl.stringValue" /></td>
    </tr>
    <tr>
        <td class="label">テキスト値 (複数行):</td>
        <td><textarea ng-model="formCtrl.stringValue"></textarea></td>
    </tr>
    <tr>
        <td class="label">パスワード:</td>
        <td><input type="password" ng-model="formCtrl.passwordValue" /></td>
    </tr>
    <tr>
        <td class="label">チェックボックス:</td>
        <td><input type="checkbox" ng-model="formCtrl.booleanValue" /></td>
    </tr>
    <tr>
        <td class="label">ドロップダウンリスト:</td>
        <td>
          <select ng-model="formCtrl.selectedOptionValue" ng-options="option for option in formCtrl.optionValues">
          </select>
        </td>
    </tr>
    <tr>
        <td class="label">複数選択リスト:</td>
        <td>
          <select multiple="multiple" ng-model="formCtrl.multipleSelectedOptionValues" ng-options="option for option in formCtrl.optionValues">
          </select>
        </td>
    </tr>
    <tr>
        <td class="label">ラジオボタン:</td>
       ...

CSS

body { font-family: arial; font-size: 14px; }
.readout { width: 45%; float: right; }
.readout td { width: 50%; }
tr { vertical-align: top }
td { padding: 0.2em 0.2em 0.6em 0.2em; }
td.label { text-align: right; padding-right: 0.5em; }
input[type=radio] { margin: 0 0.25em 0 0.25em }

JavaScript

angular.module('myApp', [])
	.controller('FormComtroller', function () {
		this.stringValue = 'こんにちわ';
  	this.passwordValue = "hogehoge";
    this.booleanValue = true;
    this.optionValues = ["Alpha", "Beta", "Gamma"];
    this.selectedOptionValue = "Gamma";
    this.multipleSelectedOptionValues = ["Alpha", "Gamma"];
    this.radioSelectedOptionValue = "Beta";
	});