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

最新推荐文章于 2024-02-15 08:00:00 发布

bboyjoe

最新推荐文章于 2024-02-15 08:00:00 发布

阅读量7.3k

点赞数

分类专栏： AngularJS 文章标签： angularjs

本文链接：https://blog.csdn.net/bboyjoe/article/details/50436218

版权

AngularJS 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

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>

bboyjoe

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
AngularJS基础——事件指令及input相关指令

AngularJS的事件指令：ng-click / ng-dbclickng-mousedown / ng-mouseupng-mouseenter / ng-mouseleaveng-mousemove / ng-mouseover / ng-mouseoutng-keydown / ng-keyup /ng-keypressng-focus / ng-blurng-submit
复制链接

扫一扫

专栏目录