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. InnoDB Undo Log

    简介 Undo Log包含了一系列在一个单独的事务中会产生的所有Undo Log记录.每一个Undo Log记录包含了如何undo事务对某一行修改的必要信息.InnoDB使用Undo Log来进行事务 ...

  2. http://codeforces.com/problemset/problem/847/E

    E. Packmen time limit per test 1 second memory limit per test 256 megabytes input standard input out ...

  3. php中常用的字符串大小写转换函数实例解释

    PHP字符串处理函数中,最为简单的几个函数,相关解释就不上了,直接看例子. PHP字符串处理函数中,最为简单的几个函数,相关解释就不上了,直接看例子. strtolower函数.strtoupper函 ...

  4. 如何在maven pom.xml文件中设置Java编译器版本

    今天遇到一个问题: 在Eclipse中用maven创建一个新的web项目,然后再用maven update一下,则JDK版本自动变为1.5. 通过查找资料,终于发现maven编译器插件(Maven C ...

  5. C#打印机操作类

    using System; using System.Collections.Generic; using System.Text; namespace MacPrinter { public cla ...

  6. Codeforces Round #441 (Div. 2, by Moscow Team Olympiad) D. Sorting the Coins

    http://codeforces.com/contest/876/problem/D 题意: 最开始有一串全部由"O"组成的字符串,现在给出n个数字,指的是每次把位置n上的&qu ...

  7. 【特效】几种实用的按钮hover效果

    效果预览:http://www.gbtags.com/gb/rtreplayerpreview-standalone/3095.htm html: <ul class="btn&quo ...

  8. Babylon.GUI官方文档翻译

    Babylon.GUI是一个基于Babylon.js的WebGL库,可以用来在WebGL3D场景中生成交互性UI与动态纹理.相比于html ui,Babylon.GUI的功能较为简化,但使用起来也更加 ...

  9. visual studio 2015 warning MSB3246

    在我们很高兴的按下 本地计算机运行 按钮,希望看到我们程序运行的时候,垃圾vs就告诉我们,你的程序出现了问题,问题就是: warning MSB3246: 解析的文件包含错误图像.无元数据或不可访问. ...

  10. UVW源码漫谈（四）

    十一假期后就有点懒散,好长时间都没想起来写东西了.另外最近在打LOL的S赛.接触LOL时间不长,虽然平时玩的比较少,水平也相当菜,但是像这种大型的赛事有时间还是不会错过的.主要能够感受到选手们对竞技的 ...