題目: 使用NG復刻KO範例7 - visible, disable, css繫結

Live Demo

<!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上重現遇到的問題嗎? 有具體的程式碼較容易找到方向。

Post a comment