題目: 使用NG復刻KO範例7 - visible, disable, css繫結
<!DOCTYPEhtml>
<htmlng-app="sampleApp">
<head>
<metacharset="utf-8">
<title>Lab 7 - visible, disable, css與屬性連動</title>
<style>
.urgent
{background-color: #ffcccc;
border: 1px solid red;
}
</style>
</head>
<bodyng-controller="defaultCtrl">
<inputtype="checkbox"ng-model="done"/>
<inputtype="text"style="width: 200px;"ng-disabled="done"
ng-model="task"ng-class="task.indexOf('急') > -1 ? 'urgent' : ''" />
<spanng-show="done">完成!</span>
<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;
self.task = ""; self.done = false;}
$scope.model = new myViewModel();});
</script>
</body>
</html>
很簡單的範例，沒太多學問，用到以下三個Directive: ng-disabled, ng-class, ng-show(用ng-hide亦可)，打完收工~
[NG系列]
http://www.darkthread.net/kolab/labs/default.aspx?m=post&t=angularjs