AngularJS 中的事件详解
更新时间：2016年07月28日 09:27:46 投稿：lqh
本文主要介绍AngularJS 事件,这里整理了相关资料,比较详细的介绍了AngularJS的使用方法,有需要的小伙伴参考下
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 事件资料的整理，后续继续补充，有需要的朋友参考下。
相关文章
本文主要介绍AngularJs Modules的相关知识，这里整理了详细的资料及简单示例代码，有兴趣的朋友可以参考下2016-09-09
在AngularJs中我们会不可避免的使用第三方库，这篇文章主要介绍了如何在AngularJs中调用第三方插件库，有兴趣的可以了解下2017-05-05
这篇文章主要给大家介绍了关于Angular中sweetalert弹框的基本使用的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-07-07
本篇文章主要介绍了angular实现IM聊天图片发送实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
Angular JS 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。接下来通过本文给大家介绍AngularJS实用开发技巧的相关资料,需要的朋友可以参考下2016-07-07
这篇文章主要介绍了AngularJS自定义指令实现面包屑功能,结合完整实例形式分析了AngularJS自定义指令的定义、调用及面包屑功能的具体实现技巧,需要的朋友可以参考下2017-05-05
angularJS+requireJS实现controller及directive的按需加载示例
本篇文章主要介绍了angularJS+requireJS实现controller及directive的按需加载示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-02-02
本篇文章主要介绍了Angular中使用better-scroll插件的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了angular 服务的单例模式(依赖注入模式下)详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-10-10
这篇文章主要介绍了Angular JS 生成动态二维码的方法,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-02-02
最新评论