AngularJS基礎——事件指令及input相關指令
阿新 • • 發佈：2019-01-26
AngularJS的事件指令：
- ng-click / ng-dbclick
- ng-mousedown / ng-mouseup
- ng-mouseenter / ng-mouseleave
- ng-mousemove / ng-mouseover / ng-mouseout
- ng-keydown / ng-keyup /ng-keypress
- ng-focus / ng-blur
- ng-submit
重點有以下幾個：
- ng-selected
- ng-change
- ng-copy
- ng-cut
- ng-cloak
- ng-non-bindable
AngularJS的input相關指令：<!DOCTYPE html> <html lang="zh_CN"> <head> <meta charset="UTF-8"> <title>Angular基礎</title> </head> <body> <div ng-app="myApp"> <div ng-controller="firstCtrl"> <button ng-click="click()">點選按鈕</button> <input type="checkbox" ng-model="sel"/> <select> <option>未選中</option> <option ng-selected="sel">選中</option> </select> <input type="checkbox" ng-model="ch" ng-change="change()"/> {{ch}} <input type="text" value="複製內容" ng-copy="co='按下複製鍵時執行的事件'"/> {{co}} <input type="text" value="剪下內容" ng-cut="cut='按下剪下鍵時執行的事件'"/> {{cut}} <input type="text" value="貼上內容" ng-paste="pa='按下貼上鍵時執行的事件'"/> {{pa}} <!--防止閃爍的兩種方案--> <div ng-bind="info"></div> <div ng-cloak>{{info}}</div> <!--就想要一個{{info}}形式的內容--> <div ng-non-bindable>{{info}}</div> </div> </div> <script src="angular.min.js"></script> <script type="application/javascript"> var myApp=angular.module('myApp',[]); myApp.controller('firstCtrl',function($scope){ $scope.info="錢不值錢"; $scope.click=function(){ console.log($scope.info);//=>"錢不值錢" }; $scope.change=function(){ if($scope.ch==true){ alert("選中了"); }else{ alert("未選中"); } } }); </script> </body> </html>
- ng-disabled
- ng-change
- ng-copy
- ng-cut
- ng-cloak
- ng-non-bindable
<!DOCTYPE html> <html lang="zh_CN"> <head> <meta charset="UTF-8"> <title>Angular基礎</title> </head> <body> <div ng-app="myApp"> <div ng-controller="firstCtrl"> <input type="button" ng-value="info" ng-disabled="isDisabled"/> <input type="text" value="{{info}}" ng-readonly="isDisabled"/> <input type="checkbox" ng-value="{{info}}" ng-checked="isDisabled"/> </div> </div> <script src="angular.min.js"></script> <script type="application/javascript"> var myApp=angular.module('myApp',[]); myApp.controller('firstCtrl',function($scope,$interval){ $scope.num=5; $scope.info=$scope.num+"秒後重新獲取驗證碼"; $scope.isDisabled=true; //利用$interval實現一個類似驗證碼定時器的操作 var timeCount=$interval(function(){ $scope.num--; $scope.info=$scope.num+"秒後重新獲取驗證碼"; if($scope.num==0){ //清除計時器 $interval.cancel(timeCount); //恢復文字及狀態 $scope.info="獲取驗證碼"; $scope.isDisabled=false; } },1000); }); </script> </body> </html>