AngularJS事件绑定的使用详解
本文和大家分享的主要是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事件绑定的使用详解的更多相关文章
- 转载 《AngularJS》5个实例详解Directive（指令）机制
<AngularJS>5个实例详解Directive(指令)机制 大漠穷秋 本文整理并扩展了<AngularJS>这本书第六章里面的内容,此书近期即将由电子工业出版社出版,敬请 ...
- AngularJS select中ngOptions用法详解
AngularJS select中ngOptions用法详解 一.用法 ngOption针对不同类型的数据源有不同的用法,主要体现在数组和对象上. 数组: label for value in a ...
- AngularJS语法基础及数据绑定——详解各种数据绑定指令、属性应用
AngularJS简单易学,但是功能强大.特别是在构建单页面应用方面效果显著.而 数据绑定 可以说是他被广泛使用的最主要的优点.他舍弃了对DOM的操作方式,一切都由AngularJS来自动更新视图,我 ...
- 详解C#泛型（二） 获取C#中方法的执行时间及其代码注入 详解C#泛型（一） 详解C#委托和事件（二） 详解C#特性和反射（四） 记一次.net core调用SOAP接口遇到的问题 C# WebRequest.Create 锚点“#”字符问题 根据内容来产生一个二维码
详解C#泛型(二) 一.自定义泛型方法(Generic Method),将类型参数用作参数列表或返回值的类型: void MyFunc<T>() //声明具有一个类型参数的泛型方法 { ...
- ASP.NET Eval四种绑定方式 及详解
1.1.x中的数据绑定语法 <asp:Literal id="litEval2" runat="server" Text='<%#DataBinde ...
- angularjs 指令（directive）详解(1)
原文地址 什么是directive?我们先来看一下官方的解释: At a high level, directives are markers on a DOM element (such as an ...
- js事件监听器用法实例详解
这篇文章主要介绍了js事件监听器用法,以实例形式较为详细的分析了javascript事件监听器使用注意事项与相关技巧,需要的朋友可以参考下本文实例讲述了js事件监听器用法.分享给大家供大家参考.具体分 ...
- js事件监听器用法实例详解-注册与注销监听封装
本文实例讲述了js事件监听器用法.分享给大家供大家参考.具体分析如下: 1.当同一个对象使用.onclick的写法触发多个方法的时候,后一个方法会把前一个方法覆盖掉,也就是说,在对象的onclick事 ...
- 《AngularJS》5个实例详解Directive（指令）机制
本文整理并扩展了<AngularJS>这本书第六章里面的内容,此书近期即将由电子工业出版社出版,敬请期待口令:Angular 1.一点小说明 指令的作用:实现语义化标签 我们常用的HTML ...
随机推荐
- IIS删除http header信息如Server, X-Powered-By, 和X-AspNet-Version
响应头信息原始头信息 Cache-Control private Content-Length 78457 Content-Type text/html; charset=utf-8 Date Fri ...
- Django,数据模型创建之数据库API参考（转载）
一旦 数据模型 创建完毕, 自然会有存取数据的需要.本文档介绍了由 models 衍生而来的数据库抽象API,及如何创建,得到及更新对象. 贯穿本参考, 我们都会引用下面的民意测验(Poll)应用程序 ...
- python Shapely 使用指南
翻译:http://toblerity.org/shapely/manual.html 引入包 from shapely.geometry import Point from shapely.geom ...
- [翻译] 为什么Uber的数据库从Postgres 切换到 MySql
Uber工程师团队发布了一个重要的博客文章:他们的数据库从Postgres从移动到MySQL.毫不夸张地说,阅读这篇文章是一种享受,特别是因为他们提到这些细节:磁盘格式和那对他们2个数据库的表现的影响 ...
- ios -- 教你如何轻松学习Swift语法(二)
前言:swift语法基础篇(二)来了,想学习swift的朋友可以拿去参考哦,有兴趣可以相互探讨,共同学习哦. 一.可选类型(重点内容) 1.什么是可选类型? 1.1在OC开 ...
- K近邻分类算法实现 in Python
K近邻(KNN):分类算法 * KNN是non-parametric分类器(不做分布形式的假设,直接从数据估计概率密度),是memory-based learning. * KNN不适用于高维数据(c ...
- 。。。contentType与pageEncoding的区别。。。
今天,开始换了一个新的开发工具IDEA,目前还不熟悉,新建了一个简单的Web项目,用到了Servlet,out.print("大家好!");然后就输出乱码了,用了response. ...
- 谷歌大神Jeff Dean：大规模深度学习最新进展 zz
http://www.tuicool.com/articles/MBBbeeQ 在AlphaGo与李世石比赛期间,谷歌天才工程师Jeff Dean在Google Campus汉城校区做了一次关于智能计 ...
- WIN7下java环境的搭建
首先,你应该已经安装了 java 的 JDK 了,笔者安装的是:jdk-7u7-windows-x64 接下来主要讲怎么配置 java 的环境变量,也是为了以后哪天自己忘记了做个备份 1.进入“计算机 ...
- 删除已经配置的类库和移除CocoaPods［转］
转自:http://blog.csdn.net/jymn_chen/article/details/19213601 引言 在使用CocoaPods(一)为项目配置第三方类库我们使用CocoaPods ...