在這邊要探討的是HTML的img tag，它似乎並沒有支援disabled屬性，因此在加上disabled後，
onclick event也會有作用，如chrome。不過在IE上，若加上disabled後就不會有作用了。
因此在這邊會測試img tag及input type="image"，前者如一開始所說的並不支援disabled屬性；
後者本身是有支援的，因此在chrome上加上disabled屬性後，event將不會有作用!
畫面(以chrome來測試)如下所示，
HTML程式碼如下：
在這邊主要是撰寫input type="image"及img來顯示圖片，並定義onclick事件來做測試!
當勾選enable時，圖示就會正常顯示，並且圖示的onclick事件都可以work
相對地
如果為not enable，則圖示為透明圖，並且只有img對於onclick事件有作用
另針對AngularJS語法說明如下：
1. {{name}} => data-binding expression相當於 ng-bind，其內的名稱所代表的value可在JavaScript語法內設定值
2. ng-disabled="expression" => expression為true時，則disabled成立，表示為disabled
3. ng-model="enable" => 當勾選checkbox時，ng-disabled內的enable將同時assign值，同步地
給值，並不需要另外在JS內定義事件來設值，以checkbox來說只有true or false。但以text
來說，會帶入您所輸入的值!
JavaScript程式碼如下：
在這邊要注意的是，demoApp該名稱可設定HTML語法內的哪個區域為AngularJS所管轄
，在此範例為<html ng-app="demoApp">，因此該頁面內所定義的ng-xxx都是有意義的，您
也可以只設定特定區域，如某個div區塊。
$scope可以想像為物件本身，如this。而其下所掌控的為定義的variable及function，這些在
HTML內ng-xx內的表示式都有相對應的名稱。
PS. 對於AngularJS語法部分，可參閱網路上教學網站，在此只簡略說明。由於小弟也是初
學者所以可能會有說明錯誤之處，請不吝指正!
結論
如果您要利用Chrome來操作的話，建議使用input="image"來取代圖示功能項目，避免在需
要disabled時，當下所定義的event還會有作用囉!
onclick event也會有作用，如chrome。不過在IE上，若加上disabled後就不會有作用了。
因此在這邊會測試img tag及input type="image"，前者如一開始所說的並不支援disabled屬性；
後者本身是有支援的，因此在chrome上加上disabled屬性後，event將不會有作用!
畫面(以chrome來測試)如下所示，
click <img />
click <input type="image" />
enable
<body ng-controller="MainCtrl">
<input type="checkbox" ng-model="enable" ng-change="changeState()" />enable
<br>
1.input type="image"<br>
<input type="image" name="add" ng-src="{{ctrl.add}}" ng-click="addState()" ng-disabled="!enable" />
<input type="image" name="update" ng-src="{{ctrl.update}}" ng-click="updateState()" ng-disabled="!enable" />
<input type="image" name="deleted" ng-src="{{ctrl.deleted}}" ng-click="deleteState()" ng-disabled="!enable" />
<br>
2.img <br>
<img name="add" ng-src="{{ctrl.add}}" ng-click="addState()" ng-disabled="!enable" />
<img name="update" ng-src="{{ctrl.update}}" ng-click="updateState()" ng-disabled="!enable" />
<img name="deleted" ng-src="{{ctrl.deleted}}" ng-click="deleteState()" ng-disabled="!enable" />
</body>
在這邊主要是撰寫input type="image"及img來顯示圖片，並定義onclick事件來做測試!
當勾選enable時，圖示就會正常顯示，並且圖示的onclick事件都可以work
相對地
如果為not enable，則圖示為透明圖，並且只有img對於onclick事件有作用
另針對AngularJS語法說明如下：
1. {{name}} => data-binding expression相當於 ng-bind，其內的名稱所代表的value可在JavaScript語法內設定值
2. ng-disabled="expression" => expression為true時，則disabled成立，表示為disabled
3. ng-model="enable" => 當勾選checkbox時，ng-disabled內的enable將同時assign值，同步地
給值，並不需要另外在JS內定義事件來設值，以checkbox來說只有true or false。但以text
來說，會帶入您所輸入的值!
JavaScript程式碼如下：
angular.module('demoApp', [])
.controller('MainCtrl', ['$scope', function($scope){
$scope.ctrl = [];
$scope.ctrl.add = 'images/ic5-off.gif';
$scope.ctrl.update = 'images/ic8-off.gif';
$scope.ctrl.deleted = 'images/ic7-off.gif';
var map = {'add':'ic5', 'update':'ic8', 'deleted':'ic7'};
$scope.changeState = function(){
$scope.steImageEnabled('add', $scope.enable);
$scope.steImageEnabled('update', $scope.enable);
$scope.steImageEnabled('deleted', $scope.enable);
};
$scope.steImageEnabled = function(name, show){
state = (show) ? 'on' : 'off';
$scope.ctrl[name] = 'images/'+map[name]+'-'+state+'.gif';
}
$scope.addState = function(){
alert("add!!!");
}
$scope.updateState = function(){
alert("update!!!");
}
$scope.deleteState = function(){
alert("delete!!!");
}
}]);
在這邊要注意的是，demoApp該名稱可設定HTML語法內的哪個區域為AngularJS所管轄
，在此範例為<html ng-app="demoApp">，因此該頁面內所定義的ng-xxx都是有意義的，您
也可以只設定特定區域，如某個div區塊。
$scope可以想像為物件本身，如this。而其下所掌控的為定義的variable及function，這些在
HTML內ng-xx內的表示式都有相對應的名稱。
PS. 對於AngularJS語法部分，可參閱網路上教學網站，在此只簡略說明。由於小弟也是初
學者所以可能會有說明錯誤之處，請不吝指正!
結論
如果您要利用Chrome來操作的話，建議使用input="image"來取代圖示功能項目，避免在需
要disabled時，當下所定義的event還會有作用囉!
留言
張貼留言