AngularJs事件绑定例子

来源：互联网发布：centos安装iso文件编辑：程序博客网时间：2024/05/01 11:26

表单提交的验证事件，改变事件，按键事件等等。。。。看代码啦。。鄙人不太会说话。。

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

0 0