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.