AngularJS 事件

ng-click 指令

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

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <script src="angular-1.6.3/angular.js"></script>

    <style>

    </style>

</head>

<body>

<div ng-app="myApp" ng-controller="myCtrl">

    <p ng-click="toggle()">按钮</p>

    <p ng-hide="myVar">

        名: <input type="text" ng-model="firstName"><br>

        姓名: <input type="text" ng-model="lastName"><br>

        <br>

        Full Name: {{firstName + " " + lastName}}

    </p>

</div>

<script>

    var app=angular.module("myApp",[]);

    app.controller("myCtrl",function ($scope) {

        $scope.count = 0;

        $scope.firstName="chen";

        $scope.lastName="yunfei";

        $scope.myVar=false;

        $scope.toggle=function () {

            $scope.myVar=!$scope.myVar;

        }

    })

</script>

</body>

</html>

应用解析:

第一部分 personController与控制器章节类似。

应用有一个默认属性: $scope.myVar = false;

ng-hide 指令设置 <p>元素及两个输入域是否可见， 根据 myVar 的值 (true 或 false) 来设置是否可见。

toggle() 函数用于切换 myVar 变量的值（true 和 false）。

ng-hide="true" 让元素 不可见。

ng-show 指令可用于设置应用中的一部分是否可见 。

ng-show="false" 可以设置 HTML 元素 不可见。

ng-show="true" 可以以设置 HTML 元素可见。

以下实例使用了 ng-show 指令:

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <script src="angular-1.6.3/angular.js"></script>

    <style>

    </style>

</head>

<body>

<div ng-app="myApp" ng-controller="myCtrl">

    <p ng-click="toggle()">按钮</p>

    <p ng-show="myVar">

        名: <input type="text" ng-model="firstName"><br>

        姓名: <input type="text" ng-model="lastName"><br>

        <br>

        Full Name: {{firstName + " " + lastName}}

    </p>

</div>

<script>

    var app=angular.module("myApp",[]);

    app.controller("myCtrl",function ($scope) {

        $scope.count = 0;

        $scope.firstName="chen";

        $scope.lastName="yunfei";

        $scope.myVar=true;

        $scope.toggle=function () {

            $scope.myVar=!$scope.myVar;

        }

    })

</script>

</body>

</html>

AngularJS学习篇（十四）的更多相关文章

  1. AngularJS学习篇（四）

    AngularJS ng-model 指令 ng-model 指令用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值. <!DOCTYPE html& ...

  2. python3.4学习笔记(十四) 网络爬虫实例代码，抓取新浪爱彩双色球开奖数据实例

    python3.4学习笔记(十四) 网络爬虫实例代码,抓取新浪爱彩双色球开奖数据实例 新浪爱彩双色球开奖数据URL:http://zst.aicai.com/ssq/openInfo/ 最终输出结果格 ...

  3. Linux学习之十四、管线命令

    Linux学习之十四.管线命令 地址:http://vbird.dic.ksu.edu.tw/linux_basic/0320bash_6.php

  4. 风炫安全WEB安全学习第二十四节课 利用XSS钓鱼攻击

    风炫安全WEB安全学习第二十四节课 利用XSS钓鱼攻击 XSS钓鱼攻击 HTTP Basic Authentication认证 大家在登录网站的时候,大部分时候是通过一个表单提交登录信息. 但是有时候 ...

  5. (C/C++学习笔记) 十四. 动态分配

    十四. 动态分配 ● C语言实现动态数组 C语言实现动态数组,克服静态数组大小固定的缺陷 C语言中,数组长度必须在创建数组时指定,并且只能是一个常数,不能是变量.一旦定义了一个数组,系统将为它分配一个 ...

  6. AngularJS学习篇（二十四）

    AngularJS 应用 <html ng-app="myNoteApp"> <head> <meta charset="utf-8&quo ...

  7. AngularJS学习篇（二十二）

    AngularJS 依赖注入 什么是依赖注入 wiki 上的解释是:依赖注入(Dependency Injection,简称DI)是一种软件设计模式,在这种模式下,一个或更多的依赖(或服务)被注入(或 ...

  8. AngularJS学习篇（二十）

    AngularJS 包含 在 AngularJS 中,你可以在 HTML 中包含 HTML 文件. 使用 AngularJS, 你可以使用 ng-include 指令来包含 HTML 内容: < ...

  9. AngularJS学习篇（十九）

    AngularJS Bootstrap 可以在你的 AngularJS 应用中加入 Twitter Bootstrap,你可以在你的 <head>元素中添加如下代码: <link r ...

随机推荐

  1. 大数据 - Teradata学习体会

    引言 随着计算机系统在处理能力.存储能力等方面,特别是计算机软件技术的不断提高,使得信息处理技术得到飞速发展. 数据处理主要分为两大类:联机事物处理OLTP.联机分析处理OLAP.OLTP也就是传统的 ...

  2. 【DDD】领域驱动设计实践 —— Domain层实现

    本文是DDD框架实现讲解的第三篇,主要介绍了DDD的Domain层的实现,详细讲解了entity.value object.domain event.domain service的职责,以及如何识别出 ...

  3. 三大开源运维监控工具zabbix、nagios、open-falcon优缺点比较

    借鉴一下别人的,自己做个记录,我觉得推荐还是使用open-falcon,最重要的一点是有完善的中文帮助文档. 帮助文档地址:https://book.open-falcon.org/zh/index. ...

  4. 入门VMware Workstation下的Debian学习之基本命令(二)

    本章记录如何在Linux终端进行命令操作命令下载路径,模拟终端.dkpg管理软件包.用户组和用户管理.文件属性.文件与目录管理.查看磁盘使用量. (1)命令下载路径: wegt 路径; (2)模拟终端 ...

  5. 关于Websockets问题:

     Websockets是一种与服务器进行全双工,双向通信的信道,它不使用http协议,他有自己的协议即自定义协议,ws协议:它的安全协议为wss协议.这种协议专门为快速传输小数据而设计的.对服务其有一 ...

  6. Installation of the JDK-9 on ubuntu(linux上安装jdk-9)

    Description:Java SE 9 is the latest update to the Java Platform(General Availability on 21 September ...

  7. day2_python的数据类型，sys,os模块，编码解码,列表，字典

    今天主要了解了python的数据类型,sys,os模块,编码解码,列表,字典 1.数据类型:int(python3没有长整型)文本总是Unicode,str表示二进制用byte类表示布尔型:True( ...

  8. hdu 1018 共同交流~

    Big Number Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total ...

  9. 基于Eclipse IDE的Ardupilot飞控源码阅读环境搭建

    基于Eclipse IDE的Ardupilot飞控源码阅读环境搭建 作者:Awesome 日期:2017-10-21 需准备的软件工具 Ardupilot飞控源码 PX4 toolchain JAVA ...

  10. Sping AOP初级——入门及简单应用

    在上一篇<关于日志打印的几点建议以及非最佳实践>的末尾提到了日志打印更为高级的一种方式——利用Spring AOP.在打印日志时,通常都会在业务逻辑代码中插入日志打印的语句,这实际上是和业 ...