AngularJS基础——事件指令及input相关指令

来源：互联网发布：html表白源码编辑：程序博客网时间：2024/06/04 20:14

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

<!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>

AngularJS的input相关指令：

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>

0 0