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 相关文章推荐
分享一个自定义的console类 让你不再纠结JS中的调试代码的兼容
Apr 20 Javascript
JavaScript中的索引数组、关联数组和静态数组、动态数组讲解
Nov 08 Javascript
Javascript的闭包详解
Dec 26 Javascript
JavaScript中函数表达式和函数声明及函数声明与函数表达式的不同
Nov 15 Javascript
JavaScript jquery及AJAX小结
Jan 24 Javascript
JS中sort函数排序用法实例分析
Jun 16 Javascript
解决给dom元素绑定click等事件无效问题的方法
Feb 17 Javascript
Three.js利用性能插件stats实现性能监听的方法
Sep 25 Javascript
JQuery判断radio单选框是否选中并获取值的方法
Jan 17 jQuery
js获取form表单中name属性的值
Feb 27 Javascript
Vue实现多标签选择器
Nov 28 Javascript
Vue如何循环提取对象数组中的值
Nov 18 Vue.js
基于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/03/04 PHP
thinkphp autoload 命名空间自定义 namespace
2015/07/17 PHP
php实现word转html的方法
2016/01/22 PHP
PHP实现Unicode编码相互转换的方法示例
2020/11/17 PHP
PHP htmlspecialchars()函数用法与实例讲解
2019/03/08 PHP
php利用array_search与array_column实现二维数组查找
2019/07/08 PHP
php设计模式之工厂模式用法经典实例分析
2019/09/20 PHP
js操作checkbox遇到的问题解决
2013/06/29 Javascript
浅析Javascript使用include/require
2013/11/13 Javascript
jquery数组封装使用方法分享(jquery数组遍历)
2014/03/25 Javascript
js调试工具Console命令详解
2014/10/21 Javascript
jQuery+css实现非常漂亮的水平导航菜单效果
2016/07/27 Javascript
js实现鼠标左右移动,图片也跟着移动效果
2017/01/25 Javascript
基于jQuery实现咖啡订单管理简单应用
2017/02/10 Javascript
ES6生成器用法实例分析
2017/04/10 Javascript
vue调用高德地图实例代码
2017/04/28 Javascript
解决Extjs下拉框不显示的问题
2017/06/21 Javascript
Vue中之nextTick函数源码分析详解
2017/10/17 Javascript
Vue2.5通过json文件读取数据的方法
2018/02/27 Javascript
Vue-Quill-Editor富文本编辑器的使用教程
2018/09/21 Javascript
了解javascript中变量及函数的提升
2019/05/27 Javascript
python计算方程式根的方法
2015/05/07 Python
Python内建模块struct实例详解
2018/02/02 Python
解决python selenium3启动不了firefox的问题
2018/10/13 Python
实例介绍Python中整型
2019/02/11 Python
详解HTML5 data-* 自定义属性
2018/01/24 HTML / CSS
外企C语言笔试题
2013/11/10 面试题
旅游管理本科生求职信
2013/10/14 职场文书
物理力学求职信
2014/02/18 职场文书
大学军训感言1500字
2014/03/09 职场文书
关于中国梦的演讲稿
2014/04/23 职场文书
实验室标语
2014/06/21 职场文书
2015年暑期实践报告范文
2015/07/13 职场文书
2016教师节问候语
2015/11/10 职场文书
python opencv将多个图放在一个窗口的实例详解
2022/02/28 Python
详解Spring Security中的HttpBasic登录验证模式
2022/03/17 Java/Android