AngularJs事件绑定例子

最新推荐文章于 2020-12-21 19:05:01 发布

cherishSpring

最新推荐文章于 2020-12-21 19:05:01 发布

阅读量837

点赞数

分类专栏： # AngularJS 文章标签： AngularJs 事件绑定

本文链接：https://blog.csdn.net/cherishSpring/article/details/51385503

版权

AngularJS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

表单提交的验证事件，改变事件，按键事件等等。。。。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件绑定例子</title>
    <script src="angular.js"></script>
    <script>
        var app=angular.module("eventBindDemo",[]);
        app.controller("eventBindCtrl",function($scope){

            //表单提交
            $scope.SubmitForm=function(){
                var name=$scope.NewName;
                var age=$scope.NewAge;
                console.log(
                        {name:name,age:age}
                );
                return false;
            };

            //点击数增加
            $scope.Counter=0;
            $scope.CounterClick=function(){
                $scope.Counter=$scope.Counter+1;
            };

            //显示及隐藏文本
            $scope.ContentFlag=true;
            $scope.HideContent=function(){
                $scope.ContentFlag=!$scope.ContentFlag;
            }
        });
    </script>
</head>
<body ng-app="eventBindDemo" ng-controller="eventBindCtrl">

    <!--表单提交Start-->
     <div style="margin-bottom: 50px;">
         <form ng-submit="SubmitForm()">
             <ul>
                 <li>姓名：<input ng-model="NewName"></li>
                 <li>年龄：<input ng-model="NewAge"> </li>
                 <li><input type="submit" value="提交"></li>
             </ul>
         </form>
     </div>
    <!--end-->

    <!--点击数增加start-->
    <div style="margin-bottom: 50px">
        点击数：<b>{{Counter}}</b>(注意看！这里有在变化。。。。)<br/>
        <!--改变事件-->
       改变事件(ng-change)： <input type="text" ng-change="CounterClick()" ng-model="counterInput"/>
                                （在这里输空格是不计数的。。。）<br/>
        <!--按键事件-->
       按键事件(ng-keypress)： <input type="text" ng-keypress="CounterClick()" ng-model="counterInput1"/>
                                （在这里输空格是会被计数的。。。。）<br/>
        <button ng-click="CounterClick()">点击事件</button>
    </div>
    <!--end-->

    <!--显示及隐藏文本start-->
    <div style="margin-bottom: 50px;">
        <p ng-show="ContentFlag">这里是文章内容</p>
        <button ng-click="HideContent()">隐藏</button>
    </div>
    <!--end-->
</body>
</html>