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 ...
随机推荐
- 在MS SQLSERVER中如何最快的速度清空所有用户表的数据
有时候我们需要清空数据库中所有用户表的数据,如果一张表一张表的清空的话,遇到一个庞大的数据系统估计得崩溃了. 用游标加上用变量来引用表名就可以做到这一点. 用变量来引用表名对表操作可以用在存储过程中 ...
- 解决Ubuntu下 Could NOT find CURL (missing: CURL_LIBRARY CURL_INCLUDE_DIR)
Ubuntu下CMake 编译时出现问题:Could NOT find CURL (missing: CURL_LIBRARY CURL_INCLUDE_DIR) 查找发现 # sudo apt-g ...
- AndroidStudio调试APP
AndroidStudio调试APP 电脑用数据线连上手机 开启手机的开发者模式 注:通常连续狂点手机的版本号即可显示出开发者选项,然后进入菜单,勾选开发者选项.USB调试. 给程序加断点 单击调试按 ...
- openssl API网络通信
1.本文是在别人的基础上,经过测试,大体总结的.操作环境ubuntu12和ubuntu14 ****************************************************** ...
- mybatis(一)环境的搭建
项目模型: 一.创建一个web项目ssm001 1.1准备数据 在数据创建表并添加数据 user表: dept表: /* Navicat MySQL Data Transfer Source Serv ...
- .Net中几种常见的页面跳转传值方法
1.ASP Server对象Execute方法 ASP Server对象的Execute方法可以在执行当前页面的过程中将另一个页面执行结果的内容插入到当前页面的输出中.Execute方法带一个参数,是 ...
- mormot orm rest注意事项
mORMot创建ORM RestFul,当CreateMissingTables的时候报错,搜了n多资料没搞定,后来胡乱建了个表测试了一通搞定了. ORM对应的每个数据表都需要一个ID字段并设置主键, ...
- SQLSERVER - Mysql 调试 笔记
//性能SET STATISTICS IO on; SET STATISTICS TIME on; //Mysql 切分字符串 CREATE PROCEDURE proc_split( in ...
- linux安装,window上安装centos虚拟机
使用的软件如下 VMware_workstation_full_12.5.2.exeCentOS-6.5-x86_64-minimal.iso 安装要点: 1 先安装VMware2 建立一个虚拟机,注 ...
- 【转】sudo命令情景分析
文章转自:http://www.cnblogs.com/hazir/p/sudo_command.html Linux 下使用 sudo 命令,可以让普通用户也能执行一些或者全部的 root 命令.本 ...