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 ...
随机推荐
- Geolocation
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Java反射的三种实现方式
Foo foo = new Foo(); 第一种:通过Object类的getClass方法 Class cla = foo.getClass(); 第二种:通过对象实例方法获取对象 Class cla ...
- MyBatis操作指南-配置结果映射一对一，一对多，多对多（基于注解）
- 使用百度编辑器时，报错：从客户端("...)中检测到有潜在危险的 Request.Form 值
ajax请求失败,提交不上去 起初没找到报错的这句话,可能由于我用了其他第三方插件的原因,后来改动了一下,出现了这个错误 然后百度得到答案:http://www.cnblogs.com/tearer/ ...
- 手动启动mongodb和nodejs程序
最近做单片机去了,以前用的mongodb和nodejs没有配置成服务,居然忘了如何手动启动.在此记录下 一.手动启动mongodb 1.进入cmd 2.在dos下打开mongodb路径E:\mongo ...
- resin or tomcat .war e.g. note
经常想在后台找WEB对应文件,做个记录 jar cvf step1.war . 命令将jsp(内含有html等数据局),等编译成war包目录下的文件有index.jps,eg.css -------- ...
- sp_executesql
execute相信大家都用的用熟了,简写为exec,除了用来执行存储过程,一般都用来执行动态Sql sp_executesql,sql2005中引入的新的系统存储过程,也是用来处理动态sql的, 如 ...
- Eclipse in Ubuntu16.04LTS Final Beta
#2016.03.30 在虚拟机Ubuntu16.04LTS上,用Eclipse编写运行Java,就目前而言,实在不是明智之举.卡顿极其厉害,还是在物理机上运行吧.那么继续Ubuntu的探索历程. 用 ...
- 商人过河问题（DFS）
问题描述:3个商人带着3个仆人过河,过河的工具只有一艘小船,只能同时载两个人过河,包括划船的人.在河的任何一边,只要仆人的数量超过商人的数量,仆人就会联合起来将商人杀死并抢夺其财物,问商人应如何设计过 ...
- POJ - 2183 Bovine Math Geniuses
“模拟“题,运用哈希,不断地按照一定运算规律对一个结果进行计算,如果重复出现就停止并且输出该数.注意到仔细看题,这种题一定要细心! POJ - 2183 Bovine Math Geniuses Ti ...