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学习篇（十三）的更多相关文章

  1. AngularJS学习篇（二十三）

    AngularJS 路由 AngularJS 路由允许我们通过不同的 URL 访问不同的内容. 通过 AngularJS 可以实现多视图的单页Web应用(single page web applica ...

  2. AngularJS学习篇（二十四）

    AngularJS 应用 <html ng-app="myNoteApp"> <head> <meta charset="utf-8&quo ...

  3. AngularJS学习篇（二十二）

    AngularJS 依赖注入 什么是依赖注入 wiki 上的解释是:依赖注入(Dependency Injection,简称DI)是一种软件设计模式,在这种模式下,一个或更多的依赖(或服务)被注入(或 ...

  4. AngularJS学习篇（二十一）

    AngularJS 动画 AngularJS 提供了动画效果,可以配合 CSS 使用. AngularJS 使用动画需要引入 angular-animate.min.js 库. <!doctyp ...

  5. AngularJS学习篇（二十）

    AngularJS 包含 在 AngularJS 中,你可以在 HTML 中包含 HTML 文件. 使用 AngularJS, 你可以使用 ng-include 指令来包含 HTML 内容: < ...

  6. AngularJS学习篇（十九）

    AngularJS Bootstrap 可以在你的 AngularJS 应用中加入 Twitter Bootstrap,你可以在你的 <head>元素中添加如下代码: <link r ...

  7. AngularJS学习篇（十八）

    AngularJS API AngularJS 全局 API 用于执行常见任务的 JavaScript 函数集合,如: 比较对象 迭代对象 转换对象 全局 API 函数使用 angular 对象进行访 ...

  8. AngularJS学习篇（十七）

    AngularJS 输入验证 <!DOCTYPE html> <html> <script src="http://apps.bdimg.com/libs/an ...

  9. AngularJS学习篇（十六）

    AngularJS 表单 HTML 控件 以下 HTML input 元素被称为 HTML 控件: input 元素 select 元素 button 元素 textarea 元素 HTML 表单 H ...

随机推荐

  1. java编程基础复习-------第二章

    一.标识符 java中标识符的命名规则: 以数字.字母.下划线和$符号组成:不能用数字开头:不能是java的关键字. 注意:不要用$命名标识符.习惯上,$只用在机器自动产生的源代码中. 二.关键字 1 ...

  2. netty4.x 传输文件

    一:简介 netty传输文件的例子并不多,当前的项目刚才需要使用netty,所以就记录一下使用方法,使用netty传输文件,首先需要启动一个服务端,等待服务端请求监听,然后传输文件的时候,启动一个客户 ...

  3. Day1 Python基础学习

    一.编程语言分类 1.简介 机器语言:站在计算机的角度,说计算机能听懂的语言,那就是直接用二进制编程,直接操作硬件 汇编语言:站在计算机的角度,简写的英文标识符取代二进制去编写程序,本质仍然是直接操作 ...

  4. I/P/B/SI/SP帧和PTS/DTS的关系

    I frame:帧内编码帧 又称intra picture,I 帧通常是每个 GOP(MPEG 所使用的一种视频压缩技术)的第一个帧,经过适度地压缩,做为随机访问的参考点,可以当成图象.I帧可以看成是 ...

  5. wxPython中按钮、文本控件的简单运用

    本节学习图形用户界面 ------------------------ 本节介绍如何创建python程序的图形用户界面(GUI),也就是那些带有按钮和文本框的窗口.这里介绍wxPython : 下载地 ...

  6. 【转】TCP/IP报文格式

    1.IP报文格式 IP协议是TCP/IP协议族中最为核心的协议.它提供不可靠.无连接的服务,也即依赖其他层的协议进行差错控制.在局域网环境,IP协议往往被封装在以太网帧(见本章1.3节)中传送.而所有 ...

  7. JAVA提高三：反射总结

    为前期学习过反射,再这里再次复习总结下:[转载请说明来源:http://www.cnblogs.com/pony1223/p/7659210.html ] 一.透彻分析反射的基础_Class类 Cla ...

  8. jquery定时刷新数据

    $(function () { setInterval("startRequest()", 3000); }); function startRequest() { $(" ...

  9. jquery系列教程6-ajax的应用全解

    点击打开: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件操作全解 jquery系列教程5-动 ...

  10. 我的three.js学习记录（二）

    通过上一篇文章我的three.js学习记录(一)基本上是入门了three.js,但是这不够3D,这次我希望能把之前做的demo弄出来,然后通过例子来分析操作步骤. 1. 示例 上图是之前做的一个dem ...