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 相关文章推荐
ajax 缓存 问题 requestheader
Aug 01 Javascript
window.location.href IE下跳转失效的解决方法
Mar 27 Javascript
js实现文本框中输入文字页面中div层同步获取文本框内容的方法
Mar 03 Javascript
JS判断网页广告是否被浏览器拦截过滤的代码
Apr 05 Javascript
JavaScript中String.match()方法的使用详解
Jun 06 Javascript
Jquery ajax基础教程
Nov 20 Javascript
Angular.js如何从PHP读取后台数据
Mar 24 Javascript
JS简单实现DIV相对于浏览器固定位置不变的方法
Jun 17 Javascript
微信小程序8种数据通信的方式小结
Feb 03 Javascript
koa2的中间件功能及应用示例
Mar 05 Javascript
浅析 Vue 3.0 的组装式 API(一)
Aug 31 Javascript
vue 路由meta 设置导航隐藏与显示功能的示例代码
Sep 04 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 magic_quotes_gpc的一点认识与分析
2008/08/18 PHP
浅析PHP中的字符串编码转换(自动识别原编码)
2013/07/02 PHP
PHP利用超级全局变量$_POST来接收表单数据的实例
2016/11/05 PHP
Thinkphp5+plupload实现的图片上传功能示例【支持实时预览】
2019/05/08 PHP
laravel框架中间件简单使用方法示例
2020/01/25 PHP
js实现的网站首页随机公告随机公告
2007/03/14 Javascript
一个js拖拽的效果类和dom-drag.js浅析
2010/07/17 Javascript
jQuery 1.5 源码解读 面向中高阶JSER
2011/04/05 Javascript
基于Jquery的将DropDownlist的选中值赋给label的实现代码
2011/05/06 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器(优化篇)
2013/06/28 Javascript
基于Jquery代码实现手风琴菜单
2015/11/19 Javascript
用JS动态改变表单form里的action值属性的两种方法
2016/05/25 Javascript
jQuery的ready方法实现原理分析
2016/10/26 Javascript
BootStrap Table后台分页时前台删除最后一页所有数据refresh刷新后无数据问题
2016/12/28 Javascript
解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题
2017/06/05 Javascript
深究AngularJS中$sce的使用
2017/06/12 Javascript
详解vue-cli之webpack3构建全面提速优化
2017/12/25 Javascript
ng-alain表单使用方式详解
2018/07/10 Javascript
微信小程序实现文件、图片上传功能
2020/08/18 Javascript
基于javascript实现贪吃蛇小游戏
2019/11/25 Javascript
vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码
2020/05/19 Javascript
[02:38]DOTA2亚洲邀请赛小组赛精彩集锦:Wings完美团击溃对手
2017/03/29 DOTA
python更新列表的方法
2015/07/28 Python
基于pytorch 预训练的词向量用法详解
2020/01/06 Python
python如何通过twisted搭建socket服务
2020/02/03 Python
Python3+selenium实现cookie免密登录的示例代码
2020/03/18 Python
HTML5 使用 sessionStorage 进行页面传值的方法
2018/07/02 HTML / CSS
在IE6系列等老式浏览器中使用HTML5的新标签实现方案
2012/12/25 HTML / CSS
伦敦时尚生活的缩影:LN-CC
2017/01/24 全球购物
门前三包责任书
2014/04/15 职场文书
动物科学专业求职信
2014/07/27 职场文书
大专生自我鉴定怎么写
2014/09/16 职场文书
2014年村计划生育工作总结
2014/11/14 职场文书
司机岗位职责范本
2015/04/10 职场文书
社区环境卫生倡议书
2015/04/29 职场文书
mysql分组后合并显示一个字段的多条数据方式
2022/01/22 MySQL