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. HDU-2222文字检索

    题目: In the modern time, Search engine came into the life of everybody like Google, Baidu, etc. Wiske ...

  2. Angular学习笔记（一）

    本文为原创文章,转载请标明出处 目录 架构 模块 组件 模板 元数据 数据绑定 指令 服务 依赖注入 模板与数据绑定 1. 架构 模块 Angular 应用是模块化的,并且 Angular 有自己的模 ...

  3. .NET DateTime 源码学习

    今天下载了微软.Net 源码,看了一下DateTime类,做下记录 DaysInMonth 这个方法是获取某年某月的天数,平时直接用觉得很简单,今天看到源码,发现设计的还是很好的 我想如果是我的话,封 ...

  4. Nginx详细安装部署教程

    一.Nginx简介 Nginx是一个web服务器也可以用来做负载均衡及反向代理使用,目前使用最多的就是负载均衡,具体简介我就不介绍了百度一下有很多,下面直接进入安装步骤 二.Nginx安装 1.下载N ...

  5. 聊聊Java中几种常用的设计模式

    1.单例模式(有的书上说叫单态模式其实都一样) 该模式主要目的是使内存中保持1个对象.看下面的例子: package org.sp.singleton; //方法一 public class Sing ...

  6. samba的安装和配置

    samba是Linux系统上的一种文件共享协议,可以实现Windows系统访问Linux系统上的共享资源,现在介绍一下如何在Ubuntu 14.04上安装和配置samba 实验环境 Ubuntu 14 ...

  7. Laravel框架使用查询构造器实现CURD

    一.什么是查询构造器? ①Laravel 查询构造器(query Builder)提供方便,流畅的接口,用来建立及执行数据库查找语法 ②使用PDO参数绑定,以保护应用程序免于SQL注入因此传入的参数不 ...

  8. SerialPort如何读取串口数据并显示在TextBox上,多线程委托

    namespace SerialPort { public partial class Form3 : Form { delegate void UpdateTextEventHandler(stri ...

  9. 在jsp页面的js中使用Cookie的原理介绍以及相应方法的代码

    1. 设置cookie 1.1 每个cookie都是一个名/值对,可以把下面这样一个字符串赋值给document.cookie: document.cookie="user_Id=828&q ...

  10. Android的快速开发框架 afinal

    afinal 框架学习: http://www.oschina.net/p/afinal