AngularJS学习篇（十三）
AngularJS HTML DOM
ng-disabled 指令
ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="angular-1.6.3/angular.js"></script>
</head>
<body>
<div ng-app="" ng-init="mySwitch=true">
<p>
<button ng-disabled="mySwitch">点我!</button>
</p>
<p>
<input type="checkbox" ng-model="mySwitch"/>按钮
</p>
<p>
{{ mySwitch }}
</p>
</div>
</body>
</html>
实例讲解：
ng-disabled 指令绑定应用程序数据 "mySwitch" 到 HTML 的 disabled 属性。
ng-model 指令绑定 "mySwitch" 到 HTML input checkbox 元素的内容（value）。
如果 mySwitch 为true, 按钮将不可用，如果 mySwitch 为false, 按钮则可用。
ng-show 指令
ng-show 指令隐藏或显示一个 HTML 元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="angular-1.6.3/angular.js"></script>
<style>
</style>
</head>
<body>
<div ng-app="">
<p ng-show="true">按钮</p>
<p ng-show="false">不可见</p>
</div>
</body>
</html>
ng-show=false,元素虽然不可见，且不占据空间相当于display：none，页面dom元素存在的
ng-show 指令根据 value 的值来显示（隐藏）HTML 元素。
你可以使用表达式来计算布尔值（ true 或 false）:
<div ng-app="" ng-init="hour=13"> <p ng-show="hour > 12">我是可见的。</p> </div>
ng-hide 指令
ng-hide 指令用于隐藏或显示 HTML 元素。
<div ng-app=""> <p ng-hide="true">我是不可见的。</p> <p ng-hide="false">我是可见的。</p> </div>
AngularJS学习篇（十三）的更多相关文章
- AngularJS学习篇（二十三）
AngularJS 路由 AngularJS 路由允许我们通过不同的 URL 访问不同的内容. 通过 AngularJS 可以实现多视图的单页Web应用(single page web applica ...
- AngularJS学习篇（二十四）
AngularJS 应用 <html ng-app="myNoteApp"> <head> <meta charset="utf-8&quo ...
- AngularJS学习篇（二十二）
AngularJS 依赖注入 什么是依赖注入 wiki 上的解释是:依赖注入(Dependency Injection,简称DI)是一种软件设计模式,在这种模式下,一个或更多的依赖(或服务)被注入(或 ...
- AngularJS学习篇（二十一）
AngularJS 动画 AngularJS 提供了动画效果,可以配合 CSS 使用. AngularJS 使用动画需要引入 angular-animate.min.js 库. <!doctyp ...
- AngularJS学习篇（二十）
AngularJS 包含 在 AngularJS 中,你可以在 HTML 中包含 HTML 文件. 使用 AngularJS, 你可以使用 ng-include 指令来包含 HTML 内容: < ...
- AngularJS学习篇（十九）
AngularJS Bootstrap 可以在你的 AngularJS 应用中加入 Twitter Bootstrap,你可以在你的 <head>元素中添加如下代码: <link r ...
- AngularJS学习篇（十八）
AngularJS API AngularJS 全局 API 用于执行常见任务的 JavaScript 函数集合,如: 比较对象 迭代对象 转换对象 全局 API 函数使用 angular 对象进行访 ...
- AngularJS学习篇（十七）
AngularJS 输入验证 <!DOCTYPE html> <html> <script src="http://apps.bdimg.com/libs/an ...
- AngularJS学习篇（十六）
AngularJS 表单 HTML 控件 以下 HTML input 元素被称为 HTML 控件: input 元素 select 元素 button 元素 textarea 元素 HTML 表单 H ...
随机推荐
- Angular4 后台管理系统搭建（9） - 用自定义angular指令，实现在服务端验证
最近这段时间发现,北京这用angular4 或 angular2的公司很少.几乎是没有.很担心自己是不是把精力放到了不应该的地方.白耽误了时间.但是随着我对新版angular框架理解的加深.个人感觉a ...
- 巧用Mono.Cecil反射加载类型和方法信息
最近在做服务的细粒度治理,统一管理所有服务的方法.参数.返回值信息.方便后续的各个模块之间的对接和协作. 目前系统中所有的服务,管理到接口契约粒度,即服务接口声明和服务接口实现.要做服务的细粒度治理: ...
- MXNet--DMLC-Core代码解读与宏
MXNet--DMLC-Core代码解读与宏 dmlc-core是Distributed (Deep) Machine Learning Community的一个基础模块,这个模块用被应用到了mxne ...
- Jest 单元测试入门
今天,我们要讲的是 Jest 单元测试的入门知识. 为何要进行单元测试? 在学习 Jest 之前,我们需要回答一个问题:为何要进行单元测试?编写单元测试可以给你带来很多好处: 将测试自动化,无需每次都 ...
- 跨平台移动端APP开发---简单高效的MUI框架
MUI是dcloud(数字天堂)公司旗下的一款跨平台开发移动APP的框架产品,在学习MUI框架之前,最先接触了Hbuilder代码编辑器,它带给我的第一感觉是快,这是HBuilder的最大优势,通过完 ...
- ZOJ2150 Raising Modulo Numbers 快速幂
ZOJ2150 快速幂,但是用递归式的好像会栈溢出. #include<cstdio> #include<cstdlib> #include<iostream> # ...
- ZOJ-3933-Team Formation【二分图最佳匹配】【KM】
http://blog.csdn.net/loy_184548/article/details/51154195 一开始对不同组合得不同分数(mm1,mg2,gg3),想用sap来写,但是保证了 ...
- MVC中View界面数据呈现示例
@using System.Text; @model List<MvcShopping.Models.ProductCategory> @{ ViewBag.Title = "测 ...
- 苹果 AR 新专利马上登陆 Facetime|Facebook 要用 VR 玩直播
附上VR技术福利视频 链接: https://pan.baidu.com/s/1boGGVs7 密码: viy8 点击关注有更多VR技术资源哦 苹果 AR 新专利马上登陆 Facetime ,使用光场 ...
- scala中的Type使用
trait Base { val name: String } case class S( name: String, age: Int ) extends Base case class F( na ...