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 相关文章推荐
jQuery实现用户注册的表单验证示例
Aug 28 Javascript
基于js与flash实现的网站flv视频播放插件代码
Oct 14 Javascript
纯JavaScript实现获取onclick、onchange等事件的值
Dec 29 Javascript
JQuery DIV 动态隐藏和显示的方法
Jun 23 Javascript
使用jQuery Ajax 请求webservice来实现更简练的Ajax
Aug 04 Javascript
微信小程序 配置文件详细介绍
Dec 14 Javascript
js前端实现图片懒加载(lazyload)的两种方式
Apr 24 Javascript
老生常谈js-react组件生命周期
May 02 Javascript
jQuery实现简单的滑动导航代码(移动端)
May 22 jQuery
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
Jan 25 jQuery
Javascript var变量删除原理及实现
Aug 26 Javascript
Nest.js 授权验证的方法示例
Feb 22 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
如何使用php绘制在图片上的正余弦曲线
2013/06/08 PHP
PHP中判断变量为空的几种方法分享
2013/08/26 PHP
php常用字符串比较函数实例汇总
2014/11/24 PHP
PHP判断字符串长度的两种方法很实用
2015/09/22 PHP
JS类库Bindows1.3中的内存释放方式分析
2007/03/08 Javascript
Google Map API更新实现用户自定义标注坐标
2009/07/29 Javascript
jquery弹出框的用法示例(一)
2013/08/26 Javascript
js跳转页面方法总结
2014/01/29 Javascript
JavaScript判断数组是否包含指定元素的方法
2015/07/01 Javascript
jquery获取多个checkbox的值异步提交给php
2015/07/07 Javascript
简单学习JavaScript中的for语句循环结构
2015/11/10 Javascript
避免jQuery名字冲突 noConflict()方法
2016/07/30 Javascript
详解vue 单页应用(spa)前端路由实现原理
2018/04/04 Javascript
vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)
2019/08/17 Javascript
vue.js实现二级菜单效果
2019/10/19 Javascript
详解Python中的多线程编程
2015/04/09 Python
Python的迭代器和生成器
2015/07/29 Python
Flask框架的学习指南之制作简单blog系统
2016/11/20 Python
Tensorflow之Saver的用法详解
2018/04/23 Python
python使用turtle绘制分形树
2018/06/22 Python
利用python将图片版PDF转文字版PDF
2019/05/03 Python
Python中py文件转换成exe可执行文件的方法
2019/06/14 Python
python障碍式期权定价公式
2019/07/19 Python
python各层级目录下import方法代码实例
2020/01/20 Python
在python里使用await关键字来等另外一个协程的实例
2020/05/04 Python
python如何实现读取并显示图片(不需要图形界面)
2020/07/08 Python
解决Python 函数声明先后顺序出现的问题
2020/09/02 Python
selenium与xpath之获取指定位置的元素的实现
2021/01/26 Python
利用CSS3的transform做的动态时钟效果
2011/09/21 HTML / CSS
css3.0 图形构成实例练习一
2013/03/19 HTML / CSS
美国折衷生活方式品牌:Robert Graham
2018/07/13 全球购物
新西兰便宜隐形眼镜购买网站:QUICKLENS New Zealand
2019/03/02 全球购物
节约粮食标语
2014/06/18 职场文书
药品销售内勤岗位职责
2015/04/13 职场文书
爱国电影观后感
2015/06/19 职场文书
mysql sock文件存储了什么信息
2022/07/15 MySQL