TypeScriptとAngularJS「formのサブミット時に処理をする」

入力フォームとかで使いそうです。先ほどの例では、ボタンに直接ng-clickをつけて関数を割り当ててましたが、formでやるように改造してみます。ちなみにTypeScript側は下と同じです。

TypeScriptとAngularJS「プロパティの監視とコレクションのバインド」 - かずきのBlog@hatena

formのサブミット時の処理

といっても特に難しいことはなくformタグにng-submit属性をつけて、そこで呼び出したいスコープのメソッドを指定するだけです。見た目いじるのに、裏側のTypeScriptを一切いじらないでいいというのはステキなことですね。

<!DOCTYPE html>

<html lang="ja" ng-app="myApp">
<head>
    <meta charset="utf-8" />
    <title>TypeScript HTML App</title>
    <link rel="stylesheet" href="app.css" type="text/css" />
    <script src="Scripts/angular.min.js"></script>
    <script src="app.js"></script>
</head>
<body>
    <h1>TypeScript HTML App</h1>

    <div id="content" ng-controller="MessageCtrl">
        <!-- ng-submitで呼び出す処理を設定 -->
        <form ng-submit="greet()">
            <span>{{messageHolder.message}}</span>
            <hr />
            <!-- ボタンのタイプはsubmitにしておく -->
            <input type="submit" value="greet" />
        </form>

        <hr />
        <ul>
            <!-- ng-repeatを使ってコレクションの数だけテンプレートを展開できる -->
            <li ng-repeat="m in messageHolder.messageLog">{{m}}</li>
        </ul>
    </div>
</body>
</html>

さくっとね。ちなみに実行結果は1つ前の記事と変わらないので省略します。