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. Quartz源码——JobStore保存JonDetail和Trigger源码分析（一）

    我都是分析的jobStore 方式为jdbc的SimpleTrigger!RAM的方式类似分析方式! {0} :表的前缀 ,如表qrtz_trigger ,{0}== qrtz_ {1}:quartz ...

  2. Laravel5 控制器

    Request 一.取值 1.取值 echo $request->input('name','这是默认值'); 2.取得所有值 $array=$request->all(); 3.判断值是 ...

  3. activemq的安装与使用

    一.activemq的安装 环境:CentOS 6.JDK8 1. 确保系统已安装了可用的jdk版本2. 从网上下载 Linux 版的 ActiveMQ( apache-activemq-5.11.1 ...

  4. [原创]KVM虚拟化管理平台的实现

    KVM虚拟化管理平台的实现 源码链接:https://github.com/wsjhk/IaaS_admin.git 根据KVM虚拟化管理的要求,设计并实现网页操作管理KVM虚拟机.设计原理架构如下图 ...

  5. Python-MongoDB的驱动安装、升级

    安装pip,并通过此来安装pymongo–Python mongodb驱动 1.下载pip安装包,下载地址:http://pypi.python.org/packages/source/p/pip/p ...

  6. 一些实用的JQuery代码片段收集(筛选，搜索，样式，清除默认值，多选等)

    //each遍历文本框 清空默认值 $(".maincenterul1").find("input,textarea").each(function () { ...

  7. WPF DataGrid 样式设置

    隔行换色,鼠标单击,悬浮样式都有,其具体效果如图 1 所示. 图 1 WPF DataGrid 样式设置效果图 其中: 界面设计代码下所示 ? + 查看代码 1 2 3 4 5 6 7 8 9 10 ...

  8. 苹果 AR 新专利马上登陆 Facetime|Facebook 要用 VR 玩直播

    附上VR技术福利视频 链接: https://pan.baidu.com/s/1boGGVs7 密码: viy8 点击关注有更多VR技术资源哦 苹果 AR 新专利马上登陆 Facetime ,使用光场 ...

  9. springboot自定义配置源

    概述 我们知道,在Spring boot中可以通过xml或者@ImportResource 来引入自己的配置文件,但是这里有个限制,必须是本地,而且格式只能是 properties(或者 yaml). ...

  10. chromium源码阅读--Browser进程初始化

    最近在研读chromium源码,经过一段懵懂期,查阅了官网和网上的技术文章,是时候自己总结一下了,首先IPC message loop开始吧,这是每个主线程必须有的一个IPC消息轮训主体,类似之前的q ...