Angular2

by hira3

HTML

<script src="https://code.angularjs.org/2.0.0-alpha.44/angular2.sfx.dev.js"></script>
<h1>Angular2</h1>

<myApp></myApp>

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

var MyApp = ng
.Component({
    selector: 'myApp',
    directives: [ng.CORE_DIRECTIVES, ng.FORM_DIRECTIVES],
    template: [
        `<div class="readout">
            <h3>Module の値</h3>
            <table>
                <tr>
                    <td class="label">テキスト値:</td>
                    <td>{{stringValue}}</td>
                </tr>
                <tr>
                    <td class="label">パスワード:</td>
                    <td>{{passwordValue}}</td>
                </tr>
                <tr>
                    <td class="label">真偽値:</td>
                    <td>{{booleanValue}}</td>
                </tr>
                <tr>
                    <td class="label">選択された値:</td>
                    <td>{{selectedOptionValue}}</td>
                </tr>
                <tr>
                    <td class="label">選択された値 (複数選択):</td>
                    <td>{{multipleSelectedOptionValues}}</td>
                </tr>
                <tr>
                    <td class="label">ラジオボタンの選択された値:</td>
                    <td>{{radioSelectedOptionValue}}</td>
                </tr>
            </table>
        </div>

				<h3>Form 部品</h3>
        <table>
            <tr>
                <td class="label">テキスト値 (タイプ時に更新):</td>
                <td><input [(ng-model)]="stringValue" /></td>
            </tr>
            <tr>
                <td class="label">テキスト値 (複数行):</td>
                <td><textarea [(ng-model)]="stringValue"> </textarea></td>
            </tr>
            <tr>
                <td class="label">パスワード:</td>
                <td><input type="password" [(ng-model)]="passwordValue" /></td>
            </tr>
            <tr>
                <td class="label">チェックボックス:</td>
                <td><input type="checkbox" [(ng-model)]="booleanValue" /></td>
            </tr>
            <tr>
                <td class="label">ドロップダウンリスト:</td>
                <td>
        					<select [(ng-model)]="selectedOptionValue">
										<option *ng-for="#option of...