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.