AngularJS学习篇（十四）
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学习篇（十四）的更多相关文章
- AngularJS学习篇（四）
AngularJS ng-model 指令 ng-model 指令用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值. <!DOCTYPE html& ...
- python3.4学习笔记(十四) 网络爬虫实例代码，抓取新浪爱彩双色球开奖数据实例
python3.4学习笔记(十四) 网络爬虫实例代码,抓取新浪爱彩双色球开奖数据实例 新浪爱彩双色球开奖数据URL:http://zst.aicai.com/ssq/openInfo/ 最终输出结果格 ...
- Linux学习之十四、管线命令
Linux学习之十四.管线命令 地址:http://vbird.dic.ksu.edu.tw/linux_basic/0320bash_6.php
- 风炫安全WEB安全学习第二十四节课 利用XSS钓鱼攻击
风炫安全WEB安全学习第二十四节课 利用XSS钓鱼攻击 XSS钓鱼攻击 HTTP Basic Authentication认证 大家在登录网站的时候,大部分时候是通过一个表单提交登录信息. 但是有时候 ...
- (C/C++学习笔记) 十四. 动态分配
十四. 动态分配 ● C语言实现动态数组 C语言实现动态数组,克服静态数组大小固定的缺陷 C语言中,数组长度必须在创建数组时指定,并且只能是一个常数,不能是变量.一旦定义了一个数组,系统将为它分配一个 ...
- AngularJS学习篇（二十四）
AngularJS 应用 <html ng-app="myNoteApp"> <head> <meta charset="utf-8&quo ...
- AngularJS学习篇（二十二）
AngularJS 依赖注入 什么是依赖注入 wiki 上的解释是:依赖注入(Dependency Injection,简称DI)是一种软件设计模式,在这种模式下,一个或更多的依赖(或服务)被注入(或 ...
- AngularJS学习篇（二十）
AngularJS 包含 在 AngularJS 中,你可以在 HTML 中包含 HTML 文件. 使用 AngularJS, 你可以使用 ng-include 指令来包含 HTML 内容: < ...
- AngularJS学习篇（十九）
AngularJS Bootstrap 可以在你的 AngularJS 应用中加入 Twitter Bootstrap,你可以在你的 <head>元素中添加如下代码: <link r ...
随机推荐
- python 库之lxml安装 坑一个
error: command 'C:\\Users\\Admin\\AppData\\Local\\Programs\\Common\\Microsoft\\Visual C++ for Python ...
- 让MessageBox对话框总在最前面
调用MessageBox的时候,如果最后一个参数用上MB_SYSTEMMODAL的话,可以让对话框在最前面
- 【转】深入理解CSS定位中的偏移
前面的话 CSS有三种基本的定位机制:普通流.浮动和绝对定位.利用定位,可以准确地定义元素框相对于其正常位置应该出现的位置,或者相对于父元素.另一个元素甚至浏览器窗口本身的位置.但元素究竟如何定位,定 ...
- linux cpu load学习笔记
linux系统中的Load对当前CPU工作量的度量 Load Average 就是一段时间 (1 分钟.5分钟.15分钟) 内平均Load. [root@CNC-BJ-5-3N1 ~]# w 20:0 ...
- 屏蔽掉Google Chrome 浏览器 textarea 单词拼写检测
可以使用html5的spellcheck属性来关闭对元素内容进行拼写检查. <!-以下两种书写方法正确--> <textarea spellcheck="true" ...
- CSS图片垂直居中方法整理集合
原帖链接:http://bbs.blueidea.com/thread-2666987-1-1.html 1.因为Opera,FF3,IE8均支持display:talbe;这些特性了,因此改进的办法 ...
- ASP.NET没有魔法——第一个ASP.NET应用《MyBlog》
创建一个ASP.NET MVC应用程序 在之前文章中介绍了ASP.NET中提供了3个开发动态网页的框架,分别是Web Form.MVC以及Web Pages,也大概介绍了它们的特点. 其中MVC对于其 ...
- Redis缓存项目应用架构设计一
一些项目整理出的项目中引入缓存的架构设计方案,希望能帮助你更好地管理项目缓存,作者水平有限,如有不足还望指点. 一.基础结构介绍 项目中对外提供方法的是CacheProvider和MQProvider ...
- Java面向对象 继承（上）
Java面向对象 继承 知识概要: (1)继承的概述 (2)继承的特点 (3)super关键字 (4)函数覆盖 (5) 子类的实例化过程 (6) final关键字 (1)继承 ...
- 浅析php curl_multi_*系列函数进行批量http请求
何起: 一系列 数量很大 数据不热 还希望被蜘蛛大量抓取的页面,在蜘蛛抓取高峰时,响应时间会被拉得很高. 前人做了这样一个事儿:页面分3块,用3个内部接口提供,入口文件用curl_multi_*系列函 ...