使用NG復刻KO範例9 - 事件繫結
<!DOCTYPEhtml>
<htmlng-app="sampleApp">
<head>
<metacharset="utf-8">
<title>Lab 9 - 事件繫結</title>
<style>
.block
{width: 50px; height: 50px;
border: 2px dotted gray; cursor: pointer;
float: left; text-align: center;
margin-right: 10px; background-color: white;
line-height: 50px;
}
</style>
</head>
<bodyng-controller="defaultCtrl"ng-style="{ backgroundColor: model.bgColor }">
<div>
<divclass="block"ng-repeat="color in model.colors"
ng-style="{ color: color }"
ng-mouseover="model.miceOver(color)"
ng-mouseout="model.miceOut()"
> {{ color }}</div>
</div>
<scriptsrc="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.js"></script>
<script>
angular.module("sampleApp", []).controller("defaultCtrl", function($scope) {
function myViewModel() {var self = this;
var origBgColor = "#444";
self.colors = ["Red", "Green", "Blue"];
self.bgColor = origBgColor;
self.miceOver = function (data) {self.bgColor = data;
};
self.miceOut = function () {self.bgColor = origBgColor;
};
}
$scope.model = new myViewModel();});
</script>
</body>
</html>
只有兩點補充:
1) ng-style="{ prop1:value1, prop2: value2 }"可指定Inline Style
2) ng-mouseover, ng-mouseout事件
[NG系列]
http://www.darkthread.net/kolab/labs/default.aspx?m=post&t=angularjs