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. Vue2.0 探索之路——生命周期和钩子函数

    beforecreate :可以在这加个loading事件 created :在这结束loading,还做一些初始化,实现函数自执行 mounted : 在这发起后端请求,拿回数据,配合路由钩子做一些 ...

  2. hdu1524博弈SG

    A Chess Game Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Tot ...

  3. 支持向量机SVM（一）

    [转载请注明出处]http://www.cnblogs.com/jerrylead 1 简介 支持向量机基本上是最好的有监督学习算法了.最开始接触SVM是去年暑假的时候,老师要求交<统计学习理论 ...

  4. python之路第二篇（基础篇）

    入门知识: 一.关于作用域: 对于变量的作用域,执行声明并在内存中存在,该变量就可以在下面的代码中使用. if 10 == 10: name = 'allen' print name 以下结论对吗? ...

  5. Linux常见命令集锦

    这是平常用到的命令在这里做一下总结: 一.python 类1.pip(已安装)pip用来安装来自PyPI(https://www.python.org/)的python所有的依赖包,并且可以选择安装任 ...

  6. HDU3844Tour （好题）

    题意:   有N个点,M个单向边,现在要你设计N条路线覆盖所有的点,每个点都属于且值属于一个环.(为什么是N条边:和最小生成树为什么有N-1条边是一样的证明). 解析:  每个点都有一个喜欢对象(出度 ...

  7. Android之View绘制流程源码分析

    版权声明:本文出自汪磊的博客,转载请务必注明出处. 对于稍有自定义View经验的安卓开发者来说,onMeasure,onLayout,onDraw这三个方法都不会陌生,起码多少都有所接触吧. 在安卓中 ...

  8. 我的第一个python web开发框架（8）——项目结构与RESTful接口风格说明

    PS:再次说明一下,原本不想写的太啰嗦的,可之前那个系列发布后发现,好多朋友都想马上拿到代码立即能上手开发自己的项目,对代码结构.基础常识.分类目录与文件功能结构.常用函数......等等什么都不懂, ...

  9. Android Annotations(2)

    AndroidAnnotations是一个开源框架,旨在加快Android开发的效率.通过使用它开放出来的注解api,你几乎可以使用在任何地方, 大大的减少了无关痛痒的代码量,让开发者能够抽身其外,有 ...

  10. git镜像仓库

    有时候我们会把一些仓库放到本地,当他更新的时候,可以使用简单命名更新他. 不是所有时间我们都有网,所以把远程的仓库作为镜像,可以方便我们查看 普通的git clone不能下载所有分支,想要简单的git ...