本文和大家分享的主要是AngularJS中事件绑定相关知识点，希望通过本文的分享，对大家学习和使用AngularJS有所帮助。

1.绑定事件：表达式、事件方法名；

2.绑定点击事件实例：显示、隐藏页面元素；

3.元素内容改变事件：ng-change；

4.按下按键事件：ng-keypress；

5.提交表单事件：ng-submit；

代码

<!doctype html>

<html ng-app="lesson" ng-controller="lesson5">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>

LESSON 5

</title>

<link rel="stylesheet" type="text/css" href="css/main.css" />

<style>

#content1{padding:16px;}

</style>

</head>

<body>

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

<div style="margin-bottom:50px;">

点击数：<b>{{Counter}}</b>

<input type="text" ng-change="CounterClick()" ng-model="counterInput" /><br/>

<input type="text" ng-keypress="CounterClick()" ng-model="counterInput1" />

<button ng-click=" CounterClick() ">点击</button>

</div>

<div style="margin-bottom:50px;">

<p ng-show="ContentFlag">这里是文章内容</p>

<button ng-click="HideContent()">隐藏</button>

</div>

<table>

<thead>

<tr>

<th>姓名</th>

<th>年龄</th>

<th>星座</th>

</tr>

</thead>

<tbody>

<tr ng-repeat="x in UserInfoList">

<td>{{x[0]}}</td>

<td>{{x[1]}}</td>

<td>{{x[2]}}</td>

</tr>

</tbody>

</table>

<table style="margin-top:30px;border:1px solid blue;">

<thead>

<tr>

<th>ID</th>

<th>姓名</th>

<th>年龄</th>

<th>星座</th>

<th>工作年限</th>

<th>操作</th>

</tr>

</thead>

<tbody>

<tr ng-repeat="x in UserEntityList | orderBy : [ 'Age','-WorkYear' ] | filter : '座' ">

<td>{{$index+1}}</td>

<td>{{x.Name | uppercase}}</td>

<td>{{x.Age}}</td>

<td>{{x.Constellation}}</td>

<td>{{x.WorkYear}}</td>

<td><button ng-click="DeleteUser(x.Name)" >删除</button></td>

</tr>

</tbody>

</table>

<script src="scripts/angular-1.4.6.min.js"></script>

<script>

var app = angular.module("lesson",[]);

app.controller("lesson5",function($scope){

$scope.UserNameList = ["Tom","Jerry","David","Tim"];

$scope.UserEntityList = [

{'Name':'Tim','Age':39,'Constellation':'摩羯座','WorkYear':19},

{'Name':'Tom','Age':26,'Constellation':'水瓶座','WorkYear':39},

{'Name':'David','Age':28,'Constellation':'天秤座','WorkYear':7},

{'Name':'Jerry','Age':26,'Constellation':'巨蟹座','WorkYear':139}

];

$scope.UserInfoList =[

["Tom",26,"水瓶座"],

["Jerry",27,"巨蟹座"],

["David",28,"天秤座"],

["Tim",39,"摩羯座"]

];

$scope.DeleteUser = function(userName){

$scope.UserEntityList.forEach(function(user,i,list){

if(user.Name==userName){

list.splice(i,1);

}

})

}

$scope.Counter = 0;

$scope.CounterClick= function(){

$scope.Counter=$scope.Counter+1;

}

$scope.ContentFlag = true;

$scope.HideContent = function(){

$scope.ContentFlag = !$scope.ContentFlag;

}

$scope.SubmitForm = function(){

var name = $scope.NewName;

var  age = $scope.NewAge;

console.log(

{name:name,age:age}

);

return false;

}

});

</script>

</body>

</html>

执行结果

原文链接：http://www.maiziedu.com/wiki/angularjs/event/

AngularJS事件绑定的使用详解的更多相关文章

  1. 转载 《AngularJS》5个实例详解Directive（指令）机制

    <AngularJS>5个实例详解Directive(指令)机制 大漠穷秋 本文整理并扩展了<AngularJS>这本书第六章里面的内容,此书近期即将由电子工业出版社出版,敬请 ...

  2. AngularJS select中ngOptions用法详解

    AngularJS select中ngOptions用法详解   一.用法 ngOption针对不同类型的数据源有不同的用法,主要体现在数组和对象上. 数组: label for value in a ...

  3. AngularJS语法基础及数据绑定——详解各种数据绑定指令、属性应用

    AngularJS简单易学,但是功能强大.特别是在构建单页面应用方面效果显著.而 数据绑定 可以说是他被广泛使用的最主要的优点.他舍弃了对DOM的操作方式,一切都由AngularJS来自动更新视图,我 ...

  4. 详解C#泛型（二） 获取C#中方法的执行时间及其代码注入 详解C#泛型（一） 详解C#委托和事件（二） 详解C#特性和反射（四） 记一次.net core调用SOAP接口遇到的问题 C# WebRequest.Create 锚点“#”字符问题 根据内容来产生一个二维码

    详解C#泛型(二)   一.自定义泛型方法(Generic Method),将类型参数用作参数列表或返回值的类型: void MyFunc<T>() //声明具有一个类型参数的泛型方法 { ...

  5. ASP.NET Eval四种绑定方式 及详解

    1.1.x中的数据绑定语法 <asp:Literal id="litEval2" runat="server" Text='<%#DataBinde ...

  6. angularjs 指令（directive）详解(1)

    原文地址 什么是directive?我们先来看一下官方的解释: At a high level, directives are markers on a DOM element (such as an ...

  7. js事件监听器用法实例详解

    这篇文章主要介绍了js事件监听器用法,以实例形式较为详细的分析了javascript事件监听器使用注意事项与相关技巧,需要的朋友可以参考下本文实例讲述了js事件监听器用法.分享给大家供大家参考.具体分 ...

  8. js事件监听器用法实例详解-注册与注销监听封装

    本文实例讲述了js事件监听器用法.分享给大家供大家参考.具体分析如下: 1.当同一个对象使用.onclick的写法触发多个方法的时候,后一个方法会把前一个方法覆盖掉,也就是说,在对象的onclick事 ...

  9. 《AngularJS》5个实例详解Directive（指令）机制

    本文整理并扩展了<AngularJS>这本书第六章里面的内容,此书近期即将由电子工业出版社出版,敬请期待口令:Angular 1.一点小说明 指令的作用:实现语义化标签 我们常用的HTML ...

随机推荐

  1. 【后台测试】手把手教你jmeter压测

    ◆版权声明:本文出自胖喵~的博客,转载必须注明出处.  转载请注明出处:http://www.cnblogs.com/by-dream/p/5611555.html 我知道我迟早是要踏上了后台测试之路 ...

  2. sshpass 用法举例

    关于sshpass 背景 在Linux后台中,经常会用到ssh.scp等命令.需要进行认证,手动输入密码,是交互式的过程. 当将ssh.scp等命令做成自动化脚本时,可能需要非交互式的登录过程,此时可 ...

  3. Java学习-046-日志抓取合并后排序问题解决方案之 --- log4j 二次定制，实现日志输出添加延时10ms

    自3月25至今,已经好久没有写学习日志了,今天在写日志抓取合并的小方法,发现抓取后的日志并米有依据系统执行的日志顺序排序.日志抓取排列逻辑如下: 通过日志标识,从各个日志文件(例如 use.log,e ...

  4. SimpleInjector的使用

    SimpleInjector的使用       国庆大假,但是,小弟依然学习,前天去看了房交会,尼玛,吓屎宝宝了,还是安静的坐在公司里巧代码比较合适: the usage of injector co ...

  5. iOS 1-2年经验面试参考题

    Model层: 数据持久化存储方案有哪些? 沙盒的目录结构是怎样的?各自一般用于什么场合? SQL语句问题:inner join.left join.right join的区别是什么? SQLite的 ...

  6. 带AI的俄罗斯方块源码

    好久没写俄罗斯方块的游戏了.从学习编程到现在,相继用Win32 API.MFC.C.C#.JS.iOS写过大约二十款左右的俄罗斯方块游戏.最近用Cocos2d-x写了一下,第一次完全将游戏逻辑与UI层 ...

  7. WWDC 2013 Session笔记 - iOS7中的多任务

    这是我的WWDC2013系列笔记中的一篇,完整的笔记列表请参看这篇总览.本文仅作为个人记录使用,也欢迎在许可协议范围内转载或使用,但是还烦请保留原文链接,谢谢您的理解合作.如果您觉得本站对您能有帮助, ...

  8. ubuntu安装eclipse配置jdk环境

    $ sudo mkdir /usr/local/java //在此目录下新建一个文件夹java $ sudo mv 下载/jdk-8u111-linux-i586.tar.gz /usr/local/ ...

  9. Silverlight TreeView 动态绑定Xml 文件

      随着应用程序的不断升级,客户的需求不断增多,程序员不得不对自己的应用程序做出相应的修改,如果修改的内容较多,那么就必须找出一种简便方法,下面就为大家介绍一下在SilverLight 中左边导航栏T ...

  10. 如何学习Python

    [整理]如何学习Python + 如何有效利用Python有关的网络资源 + 如何利用Python自带手册(Python Manual) http://www.crifan.com/howto_lea ...