NG筆記9-visible, disable, css與屬性連動
2 | 7,713 |
題目: 使用NG復刻KO範例7 - visible, disable, css繫結
排版顯示純文字
<!DOCTYPE html>
<html ng-app="sampleApp">
<head>
<meta charset="utf-8">
<title>Lab 7 - visible, disable, css與屬性連動</title>
<style>
.urgent
{
background-color: #ffcccc;
border: 1px solid red;
}
</style>
</head>
<body ng-controller="defaultCtrl">
<input type="checkbox" ng-model="done" />
<input type="text" style="width: 200px;" ng-disabled="done"
ng-model="task" ng-class="task.indexOf('急') > -1 ? 'urgent' : ''" />
<span ng-show="done">完成!</span>
<script src="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
Comments
# by HamielKuo
你好 有個問題請教你, 我以Kendo MVVM模式及AJAX方式去新增欄位,但發現JQuery Unobtrusive 卻無法驗證,我也是過你說動態新增欄位的處理,不過放在documnet.ready 、model裡面進行設定重新處理驗證,還是驗證失敗,這種狀況有什麼解決方式嗎? 另外有趣的是用JQuery Validate的required,就沒有這個問題=.=!!
# by Jeffrey
to HamielKuo, 理論上用$.validator.unobtrusive.parse()應可解決(參考: http://blog.darkthread.net/post-2011-08-02-unobtrusive-jq-vald-dynamic.aspx),你可以在JSBin或JSFiddle上重現遇到的問題嗎? 有具體的程式碼較容易找到方向。