AngularJS 中的事件详解


Posted in Javascript onJuly 28, 2016

AngularJS 事件

AngularJS 有自己的 HTML 事件指令。

ng-click 指令

ng-click 指令定义了 AngularJS 点击事件。

AngularJS 实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<button ng-click="count = count + 1">点我!</button>

<p>{{ count }}</p>

</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.count = 0;
});
</script>

</body>
</html>

运行效果:

0

隐藏 HTML 元素

ng-hide 指令用于设置应用部分是否可见。

ng-hide="true" 设置 HTML 元素不可见。

ng-hide="false" 设置 HTML 元素可见。

AngularJS 实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<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>
姓名: {{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>

</body>
</html>

运行结果:

名: 
姓: 

姓名: John Doe

应用解析:

第一部分 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 指令:

AngularJS 实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="personCtrl">

<button ng-click="toggle()">隐藏/显示</button>

<p ng-show="myVar">
名: <input type=text ng-model="person.firstName"><br>
姓: <input type=text ng-model="person.lastName"><br><br>
姓名: {{person.firstName + " " + person.lastName}}
</p>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
  $scope.person = {
    firstName: "John",
    lastName: "Doe"
  };
  $scope.myVar = true;
  $scope.toggle = function() {
    $scope.myVar = !$scope.myVar;
  };
});
</script>

</body>
</html>

运行结果:

名: 
姓: 

姓名: John Doe

以上就是对AngularJS 事件资料的整理,后续继续补充,有需要的朋友参考下。

Javascript 相关文章推荐
js监听表单value的修改同步问题,跨浏览器支持
Dec 31 Javascript
Prototype的Class.create函数解析
Sep 22 Javascript
关于图片按比例自适应缩放的js代码
Oct 30 Javascript
javascript学习基础笔记之DOM对象操作
Nov 03 Javascript
使用indexOf等在JavaScript的数组中进行元素查找和替换
Sep 18 Javascript
将数字转换成大写的人民币表达式的js函数
Sep 21 Javascript
jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)
Sep 08 Javascript
H5图片压缩与上传实例
Apr 21 Javascript
three.js 入门案例详解
Jan 23 Javascript
微信小程序分享海报生成的实现方法
Dec 10 Javascript
angular4+百分比进度显示插件用法示例
May 05 Javascript
vue实现滑动切换效果(仅在手机模式下可用)
Jun 29 Javascript
基于js里调用函数时,函数名带括号和不带括号的区别
Jul 28 #Javascript
zepto与jquery的区别及zepto的不同使用8条小结
Jul 28 #Javascript
浅谈js中调用函数时加不加括号的问题
Jul 28 #Javascript
AngularJS 入门教程之HTML DOM实例详解
Jul 28 #Javascript
javascript 小数乘法结果错误的处理方法
Jul 28 #Javascript
轮播的简单实现方法
Jul 28 #Javascript
关于JS变量和作用域详解
Jul 28 #Javascript
You might like
ThinkPHP 表单自动验证运用示例
2014/10/13 PHP
ThinkPHP使用Smarty第三方插件方法小结
2016/03/19 PHP
php实现当前页面点击下载文件的实例代码
2016/11/16 PHP
利用PHP如何统计Nginx日志的User Agent数据
2019/03/06 PHP
php设计模式之单例模式用法经典示例分析
2019/09/20 PHP
javascript 继承实现方法
2009/08/26 Javascript
jquery中动态效果小结
2010/12/16 Javascript
javascript学习笔记(十八) 获得页面中的元素代码
2012/06/20 Javascript
IE事件对象(The Internet Explorer Event Object)
2012/06/27 Javascript
为什么JS中eval处理JSON数据要加括号
2015/04/13 Javascript
JS简单实现点击跳转登陆邮箱功能的方法
2017/10/31 Javascript
php中and 和 &amp;&amp;出坑指南
2018/07/13 Javascript
使用jquery的cookie实现登录页记住用户名和密码的方法
2019/03/13 jQuery
浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑
2020/09/12 Javascript
JavaScript 常见的继承方式汇总
2020/09/17 Javascript
python实现马耳可夫链算法实例分析
2015/05/20 Python
用python写测试数据文件过程解析
2019/09/25 Python
opencv python如何实现图像二值化
2020/02/03 Python
python interpolate插值实例
2020/07/06 Python
Python爬虫爬取微博热搜保存为 Markdown 文件的源码
2021/02/22 Python
香港交友网站:be2香港
2018/07/22 全球购物
联想西班牙官网:Lenovo西班牙
2018/08/28 全球购物
美国狗旅行和户外用品领先供应商:kurgo
2020/08/18 全球购物
请说出这段代码执行后a和b的值分别是多少
2015/03/28 面试题
农救科工作职责
2013/11/27 职场文书
毕业生就业协议书
2014/04/11 职场文书
业务员自荐信范文
2014/04/20 职场文书
汉语言文学专业求职信
2014/06/19 职场文书
二年级语文上册复习计划
2015/01/19 职场文书
2015年大学迎新工作总结
2015/07/16 职场文书
小学教代会开幕词
2016/03/04 职场文书
创业计划书之便利店
2019/09/05 职场文书
解决golang 关于全局变量的坑
2021/05/06 Golang
Python带你从浅入深探究Tuple(基础篇)
2021/05/15 Python
只需要这一行代码就能让python计算速度提高十倍
2021/05/24 Python
Python一行代码实现自动发邮件功能
2021/05/30 Python