AngularJS拥有自己的HTML事件指令。


ng-click指令

  ng-click指令定义了AngularJS的click事件。

  1. <div ng-app="" ng-controller="myCtrl">
  2.  
  3. <button ng-click="count = count + 1">Click me!</button>
  4.  
  5. <p>{{ count }}</p>
  6.  
  7. </div>

运行


隐藏HTML元素

  ng-hide指令可以用来显示(或隐藏)application中的部分内容。

  ng-hide="true"将使HTML元素invisible(即隐藏)。

  ng-hide="false"将使HTML元素visible(即可见)。

  1. <div ng-app="myApp" ng-controller="personCtrl">
  2.  
  3. <button ng-click="toggle()">Toggle</button>
  4.  
  5. <p ng-hide="myVar">
  6. First Name: <input type="text" ng-model="firstName"><br>
  7. Last Name: <input type="text" ng-model="lastName"><br>
  8. <br>
  9. Full Name: {{firstName + " " + lastName}}
  10. </p>
  11.  
  12. </div>
  13.  
  14. <script>
  15. var app = angular.module('myApp', []);
  16. app.controller('personCtrl', function($scope) {
  17. $scope.firstName = "John",
  18. $scope.lastName = "Doe"
  19. $scope.myVar = false;
  20. $scope.toggle = function() {
  21. $scope.myVar = !$scope.myVar;
  22. };
  23. });
  24. </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来代替实现相同的功能:

  1. <div ng-app="myApp" ng-controller="personCtrl">
  2.  
  3. <button ng-click="toggle()">Toggle</button>
  4.  
  5. <p ng-show="myVar">
  6. First Name: <input type="text" ng-model="firstName"><br>
  7. Last Name: <input type="text" ng-model="lastName"><br>
  8. <br>
  9. Full Name: {{firstName + " " + lastName}}
  10. </p>
  11.  
  12. </div>
  13.  
  14. <script>
  15. var app = angular.module('myApp', []);
  16. app.controller('personCtrl', function($scope) {
  17. $scope.firstName = "John",
  18. $scope.lastName = "Doe"
  19. $scope.myVar = true;
  20. $scope.toggle = function() {
  21. $scope.myVar = !$scope.myVar;
  22. }
  23. });
  24. </script>

运行

AngularJS快速入门指南11:事件的更多相关文章

  1. AngularJS快速入门指南20:快速参考

    thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...

  2. AngularJS快速入门指南12:模块

    AngularJS模块定义了一个application. 模块是一个application中不同部分的容器. application中的所有控制器都应该属于一个模块. 带有一个控制器的模块 下面这个a ...

  3. AngularJS快速入门指南10:DOM节点

    AngularJS通过指令将application数据绑定到HTML DOM元素的属性上. ng-disabled指令 ng-disabled指令将AngularJS application数据绑定到 ...

  4. AngularJS快速入门指南01:导言

    AngularJS使用新的attributes扩展了HTML AngularJS对单页面应用的支持非常好(SPAs) AngularJS非常容易学习 现在就开始学习AngularJS吧! 关于本指南 ...

  5. AngularJS快速入门指南19:示例代码

    本文给出的大部分示例都可以直接运行,通过点击运行按钮来查看结果,同时支持在线编辑代码. <div ng-app=""> <p>Name: <input ...

  6. AngularJS快速入门指南18:Application

    是时候创建一个真正的AngularJS单页面应用程序了(SPA). 一个AngularJS应用程序示例 你已经了解了足够多的内容来创建第一个AngularJS应用程序: My Note Save Cl ...

  7. AngularJS快速入门指南17:Includes

    使用AngularJS,你可以在HTML中包含其它的HTML文件. 在HTML中包含其它HTML文件? 当前的HTML文档还不支持该功能.不过W3C建议在后续的HTML版本中增加HTML import ...

  8. AngularJS快速入门指南16:Bootstrap

    thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...

  9. AngularJS快速入门指南15:API

    thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...

随机推荐

  1. ORACLE 10进制与16进制的互相转换

    1. 10---->16 使用to_char(10,'xxx')函数,如果位数长,多加几个 x 2. 16---->10 使用to_number(’a','xxx')函数,如果位数长,多加 ...

  2. Find the equipment indices

    Here is a simple program test task, it doesn't have very diffcult logic: A zero-indexed array A cons ...

  3. AEScrypto WEB and ANDROID (GITHUB)

    https://github.com/evgenyneu/aes-crypto-android https://github.com/evgenyneu/aes-crypto-web https:// ...

  4. hdu 2202 最大三角形 (凸包)

    最大三角形 Time Limit: 5000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submi ...

  5. Selenium2+python自动化26-js处理内嵌div滚动条

    前言 前面有篇专门用js解决了浏览器滚动条的问题,生活总是多姿多彩,有的滚动条就在页面上,这时候又得仰仗js大哥来解决啦. 一.内嵌滚动条 1.下面这张图就是内嵌div带有滚动条的样子,记住它的长相.

  6. Selenium2+python自动化5-操作浏览器基本方法

    前言 前面已经把环境搭建好了,这从这篇开始,正式学习selenium的webdriver框架.我们平常说的 selenium自动化,其实它并不是类似于QTP之类的有GUI界面的可视化工具,我们要学的是 ...

  7. C#枚举描述获取

    public static class EnumExtension    {        public static string GetDescription(this Enum value)   ...

  8. svc6 控制台程序利用SoapToolkit3.0调用WebService

    1. 首先要安装SoapToolkit3.0安装包并安装(我的安装目录为:C:\Program Files\Common Files) 2. 新建vc控制台程序(空项目),项目名称:WinConsol ...

  9. 第一章 zookeeper基础概念

    1.ZooKeeper是什么 ZooKeeper为分布式应用提供了高效且可靠的分布式协调服务,提供了统一命名服务. 配置管理和分布式锁等分布式的基础服务.在解决分布式数据一致性方面, ZooKeepe ...

  10. 在C代码中调用C++接口

    一 在C源文件中调用C++封装的接口 例如: 要想在A.c文件中,调用生命在B.h,实现在B.cpp中的接口bool getMAC(char *mac_addr); 其实现方法 B.cpp 如下: / ...