<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>AngularJS TIPS</title>
<script src="https://code.angularjs.org/1.4.8/angular.min.js"></script>
<script src="1_myscript.js"></script>
<script src="2_myscript.js"></script>
</head>
<body>
<div ng-controller="myCtrl">
<ul>
<li ng-repeat="user in users" ng-controller="userItemCtrl">
{{user.name}} {{user.age}}
<button ng-click="increment()">+1</button>
</li>
</ul>
</div>
</body>
</html>
1_myscript.js
(function(){
angular.module('myApp', []);
angular.module('myApp')
.controller('myCtrl', ['$scope', function($scope) {
$scope.users = [
{"name":"urano", "age":35, "money":50000},
{"name":"nakanishi", "age":25, "money":1000000},
{"name":"shinji", "age":45, "money":444000},
{"name":"john", "age":49, "money":424000},
{"name":"yna", "age":42, "money":934100},
{"name":"miha", "age":25, "money":124000},
{"name":"kazu", "age":43, "money":834000},
{"name":"taka", "age":15, "money":799000}
];
$scope.today = new Date();
}]);
})();
2_myscript.js
(function(){
angular.module('myApp')
.controller('userItemCtrl', ['$scope', function($scope) {
$scope.increment = function(){
$scope.user.age++;
};
}]);
})();
イベント一覧
ディレクティブ | 概要 |
---|---|
ng-click | クリックした時 |
ng-dblclick | ダブルクリックした時 |
ng-mousedown | マウスボタンが押されたとき |
ng-mouseup | マウスボタンが離されたとき |
ng-mouseenter | 要素にマウスポインターが入った時 |
ng-mouseleave | 要素からマウスポインターが出た時 |
ng-mousemove | 要素上をマウスポインターが移動した時 |
ng-mouseover | 要素上にマウスポインターが重なった時 |
ng-mouseout | 要素上に重なっていたマウスポインターが外れた時 |
ng-focus | 要素にフォーカスした時 |
ng-blur | 要素からフォーカスが外れた時 |
ng-keydown | キーを押した時 |
ng-keypress | キーを押し続けている時 |
ng-keyup | キーを離した時 |
ng-change | 値を変更し時 |
ng-copy | コピーした時 |
ng-cut | カットした時 |
ng-paste | ペーストした時 |
ng-submit | サブミットした時 |