一、angularjs的指令
*ng-disabled（按钮禁用）—服务$interval
<!DOCTYPE HTML> <html ng-app='myApp'> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="angular.min.js"></script> <style type="text/css"> </style> <script> var m1=angular.module('myApp',[]); m1.controller('Aaa',['$scope','$interval',function($scope,$interval){ var iNow=5; $scope.text=iNow+'秒'; $scope.isDisabled=true; var timer=$interval(function(){ iNow--; $scope.text=iNow+'秒'; if(iNow==0){ $interval.cancel(timer); $scope.text='可以点击啦'; $scope.isDisabled=false; } },1000) }]); </script> <title>无标题文档</title> </head> <body> <div ng-controller="Aaa"> <input type="button" value="{{text}}" ng-disabled="isDisabled"> </div> </body> </html>
*ng-readonly（只能针对输入框）
<!DOCTYPE HTML> <html ng-app='myApp'> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="angular.min.js"></script> <style type="text/css"> </style> <script> var m1=angular.module('myApp',[]); m1.controller('Aaa',['$scope','$interval',function($scope,$interval){ var iNow=5; $scope.text=iNow+'秒'; $scope.isDisabled=true; var timer=$interval(function(){ iNow--; $scope.text=iNow+'秒'; if(iNow==0){ $interval.cancel(timer); $scope.text='可以点击啦'; $scope.isDisabled=false; } },1000) }]); </script> <title>无标题文档</title> </head> <body> <div ng-controller="Aaa"> <input type="text" value="{{text}}" ng-readonly="isDisabled"> </div> </body> </html>
*ng-checked
<!DOCTYPE HTML> <html ng-app='myApp'> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="angular.min.js"></script> <style type="text/css"> </style> <script> var m1=angular.module('myApp',[]); m1.controller('Aaa',['$scope','$interval',function($scope,$interval){ var iNow=5; $scope.text=iNow+'秒'; $scope.isDisabled=true; var timer=$interval(function(){ iNow--; $scope.text=iNow+'秒'; if(iNow==0){ $interval.cancel(timer); $scope.text='可以点击啦'; $scope.isDisabled=false; } },1000) }]); </script> <title>无标题文档</title> </head> <body> <div ng-controller="Aaa"> <input type="checkbox" value="{{text}}" ng-checked="isDisabled"> </div> </body> </html>
*ng-value(用户体验比用)
<!DOCTYPE HTML> <html ng-app='myApp'> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="angular.min.js"></script> <style type="text/css"> </style> <script> var m1=angular.module('myApp',[]); m1.controller('Aaa',['$scope','$interval',function($scope,$interval){ var iNow=5; $scope.text=iNow+'秒'; $scope.isDisabled=true; var timer=$interval(function(){ iNow--; $scope.text=iNow+'秒'; if(iNow==0){ $interval.cancel(timer); $scope.text='可以点击啦'; $scope.isDisabled=false; } },1000) }]); </script> <title>无标题文档</title> </head> <body> <div ng-controller="Aaa"> <input type="button" ng-value="text" ng-disabled="isDisabled"> <input type="text" ng-value="text" ng-readonly="isDisabled"> <input type="checkbox" ng-value="text" ng-checked="isDisabled"> </div> </body> </html>