AngularJS快速入门指南11:事件
AngularJS拥有自己的HTML事件指令。
ng-click指令
ng-click指令定义了AngularJS的click事件。
<div ng-app="" ng-controller="myCtrl"> <button ng-click="count = count + 1">Click me!</button> <p>{{ count }}</p> </div>
隐藏HTML元素
ng-hide指令可以用来显示(或隐藏)application中的部分内容。
ng-hide="true"将使HTML元素invisible(即隐藏)。
ng-hide="false"将使HTML元素visible(即可见)。
<div ng-app="myApp" ng-controller="personCtrl"> <button ng-click="toggle()">Toggle</button> <p ng-hide="myVar">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{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>
代码解释:
personCtrl定义了一个控制器,这和控制器一章中的内容相同。
application有一个默认属性(变量):$scope.myVar = false;
元素<p>拥有两个input标签,ng-hide指令通过myVal变量的值(true或false)设置visibility。
函数toggle()用来转换myVar变量的值,将其修改为true或false。
当ng-hide="true"时HTML元素会被隐藏(即invisible)。
显示HTML元素
ng-show指令也可以用来显示(或隐藏)application中的部分内容(与ng-hide指令正好相反)。
ng-show="false"将使HTML元素invisible(即隐藏)。
ng-show="true"将使HTML元素visible(即可见)。
上一小节中的示例也可以用ng-show来代替实现相同的功能:
<div ng-app="myApp" ng-controller="personCtrl"> <button ng-click="toggle()">Toggle</button> <p ng-show="myVar">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</p> </div> <script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
$scope.firstName = "John",
$scope.lastName = "Doe"
$scope.myVar = true;
$scope.toggle = function() {
$scope.myVar = !$scope.myVar;
}
});
</script>
AngularJS快速入门指南11:事件的更多相关文章
- AngularJS快速入门指南20:快速参考
thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...
- AngularJS快速入门指南12:模块
AngularJS模块定义了一个application. 模块是一个application中不同部分的容器. application中的所有控制器都应该属于一个模块. 带有一个控制器的模块 下面这个a ...
- AngularJS快速入门指南10:DOM节点
AngularJS通过指令将application数据绑定到HTML DOM元素的属性上. ng-disabled指令 ng-disabled指令将AngularJS application数据绑定到 ...
- AngularJS快速入门指南01:导言
AngularJS使用新的attributes扩展了HTML AngularJS对单页面应用的支持非常好(SPAs) AngularJS非常容易学习 现在就开始学习AngularJS吧! 关于本指南 ...
- AngularJS快速入门指南19:示例代码
本文给出的大部分示例都可以直接运行,通过点击运行按钮来查看结果,同时支持在线编辑代码. <div ng-app=""> <p>Name: <input ...
- AngularJS快速入门指南18:Application
是时候创建一个真正的AngularJS单页面应用程序了(SPA). 一个AngularJS应用程序示例 你已经了解了足够多的内容来创建第一个AngularJS应用程序: My Note Save Cl ...
- AngularJS快速入门指南17:Includes
使用AngularJS,你可以在HTML中包含其它的HTML文件. 在HTML中包含其它HTML文件? 当前的HTML文档还不支持该功能.不过W3C建议在后续的HTML版本中增加HTML import ...
- AngularJS快速入门指南16:Bootstrap
thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...
- AngularJS快速入门指南15:API
thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...
随机推荐
- asp.net mvc 模型验证-最舒服的验证方式
在院子里发现 http://www.cnblogs.com/yangecnu/p/3759784.html 模型验证方法 1. 一般方法 繁琐, 无数的if else, 在炎炎夏天,我见过一个验证方法 ...
- Android常见崩溃或闪退的问题描述及原因总结、及与性能相关的模块——持续更新
1.nullpointer——就是使用一个对象的时候还没有对其进行初始化导致该问题 一般在何种情况下容易出现呢? (1)父窗口+子窗口同时出现的,父窗口因为某种原因消掉了,子窗口还在,操作子窗口找不到 ...
- 联想扬天 电脑 键盘改默认fn功能键
联想扬天电脑改键工具 windows 8 windows8.1 64位版本:http://support1.lenovo.com.cn/lenovo/wsi/Modules/DriverDetail. ...
- 《CSS3秘籍》(第三版)-读书笔记(2)
第6章 文本格式化 1. 使用字体 字体font-family: 通用的字体样式: serif字体最适用于冗长的文字信息.这种字体使字母主笔画的结尾处会有一些细小的“足”. sans-serif字体 ...
- 网易视频云技术分享:linux软raid的bitmap分析
网易视频云是网易倾力打造的一款基于云计算的分布式多媒体处理集群和专业音视频技术,提供稳定流畅.低时延.高并发的视频直播.录制.存储.转码及点播等音视频的PAAS服务,在线教育.远程医疗.娱乐秀场.在线 ...
- 应该了解的Python模块
Python很优雅.使用以下模块有助于保持你的代码整洁.易于维护.欢迎补充. Docopt.忘了optparse和argparse吧,使用docstring来构建优雅的.高可读性.复杂(如果你有这个需 ...
- Navicat for Oracle 连接oracle 配置
oci.dll 替换为对应oracle版本的oci.dll
- PHP查看当前端口号
<?php echo "当前页面服务器IP地址为:"; echo $_SERVER["SERVER_ADDR"]; echo "<br / ...
- VB6.0和VB.Net的函数等对照表
VB6.0和VB.Net的对照表 VB6.0 VB.NET AddItem Object名.AddItem Object名.Items.Add ListBox1.Items.Add ComboBox1 ...
- PHP中想过获取系统内置的所有常量吗?
print_r(get_defined_constants(true)); OK!这样就可以了,赶紧去试试吧