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. js 递归函数的使用及常用函数

    1.递归函数的使用: 公园里有一堆桃子,猴子每天吃掉一半,挑出一个坏的扔掉,第6天的时候发现还剩1个桃子,问原来有多少个桃子 var peache;function peaches(n) { if ( ...

  2. program 1 : python codes for login program(登录程序python代码)

    #improt time module for count down puase time import time #set var for loop counting counter=1 #logi ...

  3. Sequence query 好题啊

    Sequence query Time Limit: 2000/1000MS (Java/Others) Memory Limit: 128000/64000KB (Java/Others) Subm ...

  4. P1013

    问题 D: P1013 时间限制: 1 Sec  内存限制: 128 MB提交: 33  解决: 21[提交][状态][讨论版] 题目描述 " 找啊找啊找GF,找到一个好GF,吃顿饭啊拉拉手 ...

  5. 关于离线底图和离线shp文件的加载

    首先底图是我自己用百度地图18级别的瓦片图在armap中制作的TPK文件,shp图层是我用同样的百度地图18级别的瓦片图矢量化的,二者在arcmap中的空间参考是一致的,所以我以为在移动端加入的时候二 ...

  6. Web API 路由 [二] Attribute Routing

    1) 启用.在App_Start - WebApiConfig.cs下 //在Register函数添加如下代码: config.MapHttpAttributeRoutes(); 2) 使用.Cont ...

  7. 学习札记 ----wind7下如何安装SqlServer数据库

    1.控制面板 ---找到程序和功能选项 如下图所示: 2.打开程序和功能后进入如下图所示的界面,点击打开或关闭window功能. 3.启动window7自带的IIS功能.如下图所示: 4.如上动作准备 ...

  8. 使用Canvas制作时钟动画

    复习Javascript到Canvas的知识点,看到一个使用Canvas绘制的静态时钟例子,便想将其变成动态显示系统时间的时钟动画.另外再配上数字显示的时钟,一个小的时钟模块的诞生了!目前的界面还比较 ...

  9. cocos2dx - 伤害实现

    接上一节内容:cocos2dx - 生成怪物及AI 本节主要讲如何通过创建简单的矩形区域来造成伤害 在小游戏中简单的碰撞需求应用box2d等引擎会显得过于臃肿复杂,且功能不是根据需求定制,还要封装,为 ...

  10. 【学习】如何用jQuery获取iframe中的元素

    (我的博客网站中的原文:http://www.xiaoxianworld.com/archives/292,欢迎遇到的小伙伴常来瞅瞅,给点评论和建议,有错误和不足,也请指出.) 说实在的,以前真的很少 ...