トップ 差分 一覧 ソース 検索 ヘルプ PDF RSS ログイン

angularJS_pushButton

[AngularJS] ボタンプッシュでの動作

ボタンが押されたときに「Hello World!」と表示する簡単な例です。

以下、サンプルソース。

<!doctype html>
<html ng-app>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.8/angular.min.js"></script>

<script type="text/javascript">
<!--
function buttonTest($scope) {
    $scope.click = function() {
        $scope.title = "Hello World!!";
    };
}
-->
</script>

</head>

<body>
    <h1>PushButtonのテスト</h1>
    <hr />
    ボタンプッシュでHello World!!と表記されます。<br />

    <div ng-controller="buttonTest">
        <form method="POST">
            <input type="button" ng-click="click()" value="Push!" /><br />
            {{title}}<br />
        </form>
    </div>
</body>
</html>
<input type="button" ng-click="click()" value="Push!" />

の箇所で、ボタンが押された場合にng-click内のclick関数を呼びます。

「ng-controller="buttonTest"」で指定されたbuttonTestの関数がJavaScript部で呼ばれます。

function buttonTest($scope) {
    $scope.click = function() {
        $scope.title = "Hello World!!";
    };
}

この中の「$scope.click」にボタンプッシュのときの挙動を記述。この場合は、{{title}} の箇所に「Hello World!!」を入れています。


最終更新時間:2014年05月30日 16時31分48秒

Future's Laboratory 技術格納庫 2004-2013 Yutaka Yoshisaka.