angularjs教程——input相关指令详解
2016-10-11 11:47
471 查看
一、angularjs的指令
*ng-disabled(按钮禁用)—服务$interval
*ng-readonly(只能针对输入框)
*ng-checked
*ng-value(用户体验比用)
*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>
相关文章推荐
- angularjs教程——样式相关指令详解
- AngularJS 事件指令/input相关指令/样式指令/DOM操作指令详解
- angularjs教程——Dom操作相关指令详解
- 【AngularJS】6.AngularJS 事件指令/input相关指令/样式指令/DOM操作指令详解
- angularJS中input相关指令详解
- Angularjs 事件指令 input 相关指令 和样式指令 DOM 操作指令详解
- AngularJS入门教程之ng-checked 指令详解
- AngularJS基础——事件指令及input相关指令
- (3)AngularJS 1.X 之和Input相关的指令
- AngularJs -- 指令详解
- angularjs指令中的compile与link函数详解(转)
- 《AngularJS》5个实例详解Directive(指令)机制
- unity3d 手机中Input类中touch详解_教程
- 《AngularJS》5个实例详解Directive(指令)机制
- AngularJS实例详解Directive(指令)机制
- 【转】angularjs指令中的compile与link函数详解
- AngularJS开发指南4:指令的详解
- angularjs指令中的compile与link函数详解
- AngularJS权威教程 笔记(AngularJS是一个很有意思的库,基于函数形参的依赖注入?酷!还有奇怪的$scope和指令)
- Angularjs中input的指令和属性