【12】AngularJS 事件
AngularJS 事件
AngularJS 有自己的 HTML 事件指令。
ng-click 指令
ng-click 指令定义了 AngularJS 点击事件。
<div ng-app="" ng-controller="myCtrl">
<button ng-click="count = count + 1">点我!</button>
<p>{{ count }}</p>
</div>
隐藏 HTML 元素
ng-hide 指令用于设置应用部分是否可见。
ng-hide="true" 设置 HTML 元素不可见。
ng-hide="false" 设置 HTML 元素可见。
<div ng-app="myApp" ng-controller="personCtrl">
<button ng-click="toggle()">>隐藏/显示</button>
<p ng-hide="myVar">
名:<input type="text" ng-model="firstName"><br>
姓名:<input type="text" ng-model="lastName"><br>
<br>
FullName:{{firstName +" "+ lastName}}
</p>
</div>
<script>
var app = angular.module('myApp',[]);
app.controller('personCtrl',function($scope){
$scope.firstName ="John",
$scope.lastName ="Doe"
$scope.myVar =false;
$scope.toggle =function(){
$scope.myVar =!$scope.myVar;
};
});
</script>
应用解析:
第一部分 personController与控制器章节类似。
应用有一个默认属性: $scope.myVar = false;
ng-hide 指令设置 <p>元素及两个输入域是否可见, 根据 myVar 的值 (true 或 false) 来设置是否可见。
toggle() 函数用于切换 myVar 变量的值(true 和 false)。
ng-hide="true" 让元素 不可见。
显示 HTML 元素
ng-show 指令可用于设置应用中的一部分是否可见 。
ng-show="false" 可以设置 HTML 元素 不可见。
ng-show="true" 可以以设置 HTML 元素可见。
以下实例使用了 ng-show 指令:
<div ng-app="myApp" ng-controller="personCtrl">
<button ng-click="toggle()">隐藏/显示</button>
<p ng-show="myVar">
名:<input type="text" ng-model="firstName"><br>
姓:<input type="text" ng-model="lastName"><br>
<br>
姓名:{{firstName +" "+ lastName}}
</p>
</div>
<script>
var app = angular.module('myApp',[]);
app.controller('personCtrl',function($scope){
$scope.firstName ="John",
$scope.lastName ="Doe"
$scope.myVar =true;
$scope.toggle =function(){
$scope.myVar =!$scope.myVar;
}
});
</script>
【12】AngularJS 事件的更多相关文章
- angularJS 事件广播与接收[转]
路由的事件 事件这个词在前端出现的频率真是高,根本拦不住,哪都是.$route服务在路由过程中的每个阶段都会触发不同的事件,可以为这些不同的路由事件设置监听器并做出响应. 一共有4个事件用来监听路由的 ...
- AngularJS学习之旅—AngularJS 事件(十四)
1.AngularJS 事件 ng-click ( 适用标签 :所有,触发事件:单击): ng-dblclick( 适用标签 :所有,触发事件:双击): ng-blur(适用标签 : a,input, ...
- AngularJs HTML DOM、AngularJS 事件以及模块的学习(5)
今天的基础就到了操作DOM,事件和模块的学习,其实我个人感觉学习起来AngularJS并没有想象中的那么的艰难,可能是因为这个太基础化吧,但是我们从初学开始就应该更加的自信一些,后来我可能会写一个小的 ...
- js进阶 12 jquery事件汇总
js进阶 12 jquery事件汇总 一.常用事件 页面载入事件 ready() 文档就绪事件(当 HTML 文档就绪可用时) 鼠标事件 click() 触发.或将函数绑定到指定元素的 click 事 ...
- angularjs事件通信$on,$emit,$broadcast详解
公司项目开发用的是angularjs,关于事件通讯一直用的是EventBus,直到上周写一个小组件懒得引用EventBus时,想到用angularjs自带的事件通信时,结果很尴尬的忘记原生方法单词怎么 ...
- AngularJS 事件
AngularJS 有自己的 HTML 事件指令. ng-click指令: ng-click 指令定义了 AngularJS 点击事件. <!DOCTYPE html> <html& ...
- AngularJS事件绑定的使用详解
本文和大家分享的主要是AngularJS中事件绑定相关知识点,希望通过本文的分享,对大家学习和使用AngularJS有所帮助. 1.绑定事件:表达式.事件方法名: 2.绑定点击事件实例:显示.隐藏页面 ...
- AngularJS 事件广播与接收 $emit $broadcast $on
AngularJS中的作用域scope有一个非常有层次和嵌套分明的结构. 其中它们都有一个主要的$rootScope(也就说对应的Angular应用或者ng-app),然后其他所有的作用域部分都是继承 ...
- angularjs事件传递$on、$emit和$broadcast
如何在作用域之间通信呢? 1.创建一个单例服务,然后通过这个服务处理所有子作用域的通信. 2.通过作用域中的事件处理通信.但是这种方法有一些限制:例如,你并不能广泛的将事件传播到所有监控的作用域中.你 ...
随机推荐
- E20170606-gg
complete adj. 完整的; 完成的; (用以强调) 完全的; 达到结尾的; vt. 完成,使完满; 完成或结束; 填写(表格); process n. 过程; 工序; 做事方法; 工艺 ...
- bzoj 1734: [Usaco2005 feb]Aggressive cows 愤怒的牛【二分+贪心】
二分答案,贪心判定 #include<iostream> #include<cstdio> #include<algorithm> using namespace ...
- hdu1512 Monkey King(并查集,左偏堆)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1512 题目大意:有n个猴子,一开始每个猴子只认识自己.每个猴子有一个力量值,力量值越大表示这个猴子打架 ...
- crosswalk 初步使用
这里简单的说下 crossWalk 的配置; 我在学习 crosswalk 的时候,看到一篇博客,他所记录的已经是很完整的教程了: 点击查看 本文就根据该博客和官网说明,进行部分修改,补充; 首先 c ...
- [C陷阱和缺陷] 第3章 语义“陷阱”
第3章 语义"陷阱" 一个句子哪怕其中的每个单词都拼写正确,而且语法也无懈可击,仍然可能有歧义或者并非书写者希望表达的意思.程序也有可能表面上是一个意思,而实际上的意思却相 ...
- 405 Convert a Number to Hexadecimal 数字转换为十六进制数
给定一个整数,编写一个算法将这个数转换为十六进制数.对于负整数,我们通常使用 补码运算 方法.注意: 十六进制中所有字母(a-f)都必须是小写. 十六进制字符串中不能包含多余的前导零.如果 ...
- [转]Mysql之Union用法
转自:http://blog.csdn.net/ganpengjin1/article/details/9090405 MYSQL中的UNION UNION在进行表链接后会筛选掉重复的记录,所以在表链 ...
- 24 C#的类和对象
类是C#面向对象编程的基本单元.一个类都可以包含2种成员:字段和方法. 1)类的字段代表类中被处理的数据(变量): 2)类的方法代表对这些数据的处理过程或用于实现某种特定的功能,方法中的代码往往需 ...
- CF822C Hacker, pack your bags!
思路: 对于一个区间[l, r],只需枚举所有满足r' < l并且二者duration之和为x的区间[l', r'],寻找其中二者cost之和最小的即可.于是可以开一个数组a[],a[i]表示所 ...
- 关于使用 autoFac 的注入方法
1.使用 NUGET 安装 Autofac 2.需要引用Autofac ASP.NET MVC 5 Integration 这个扩展包. 但有时候在NuGet中找不到 该包 需要使用“程序要控制器控 ...