1.AngularJS为HTML DOM元素的属性提供了绑定应用数据的指令;

2.ng-disabled指令:直接绑定应用程序数据到HTML的disable属性:

<div ng-app="" ng-init="mySwitch=true">

<p>

<button ng-disabled="mySwitch">点击!</button>      //ng-disabled指令绑定应用程序数据"mySwitch"到HTML的disable属性

</p>

<p>

<input type="checkbox" ng-model="mySwitch">按钮     //mg-model指令绑定"mySwith"d到HTML inputcheckbox 元素的内容(value)

</p>

<p>

{{mySwitch}}

</p>

</div>

3.ng-show指令:隐藏或显示一个HTML元素;

<div ng-app="">

<p ng-show="true">我是可见的</p>

<p ng-show="false">我是不可见的</p>

</div>

**ng-show指令根据value的值来显示(隐藏)HTML元素:

<div ng-app="" ng-init="hour=13">

<p ng-show="hour>12">我是可见的</p>

</div>

4.ng-hide指令:用于隐藏或显示HTML元素:

<div ng-app="">

<p ng-hide="true">我是不可见的</p>

<p ng-hide="false">我是可见的</p>

</div>

AngularJS学习之HTML DOM的更多相关文章

  1. Angularjs学习---官方phonecat实例学习angularjs step0 step1

    接下来一系列的文章都是学习https://docs.angularjs.org/tutorial的笔记,主要学习的angular-phonecat项目的实现,来介绍angularjs的使用. 1.下载 ...

  2. 我的AngularJS 学习之旅

    我的AngularJS 学习之旅 基础篇 1.Angular的 起源 2.比较Web 页面实现的几种方式 3.一些基本术语 4.Angular与其他框架的兼容性 5.总结 6.综合实例   很早之前就 ...

  3. angularjs学习总结 详细教程(转载)

    1 前言 前端技术的发展是如此之快,各种优秀技术.优秀框架的出现简直让人目不暇接,紧跟时代潮流,学习掌握新知识自然是不敢怠慢. AngularJS是google在维护,其在国外已经十分火热,可是国内的 ...

  4. AngularJs学习总结-了解基本特性(-)

    现在的前端项目中基本上都会用到angularjs框架,之前并不了解这个框架,也是因为最近接手的项目,所以打算好好的学习下它.之前都是搞pc端,现在接手的是移动端的项目,移动端UI框架用的是ionic+ ...

  5. [转载]angularjs学习总结 详细教程

    http://blog.csdn.net/yy374864125/article/details/41349417#t75 目录(?)[-] 前言 AngularJS概述 AngularJS是什么 A ...

  6. AngularJs学习笔记-AngularJS权威教程学习笔记

    AngularJS是什么? AngularJS是一种构建动态Web应用的结构化框架.主要用于构建单页面Web应用, 增加抽象级别,使构建交互式的现代Web应用变得更加简单. AngularJS使开发W ...

  7. AngularJs学习笔记--Forms

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...

  8. AngularJs学习笔记--directive

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...

  9. AngularJs学习笔记--bootstrap

    AngularJs学习笔记系列第一篇,希望我可以坚持写下去.本文内容主要来自 http://docs.angularjs.org/guide/ 文档的内容,但也加入些许自己的理解与尝试结果. 一.总括 ...

随机推荐

  1. zookeeper集群搭建(windows环境下)

    本次zk测试部署版本为3.4.6版本,下载地址http://mirrors.cnnic.cn/apache/zookeeper/ 限于服务器个数有限本次测试了两种情况 1.单节点方式:部署在一台服务器 ...

  2. supersr--图片轮播逻辑

    // //  ViewController.m // 图片轮播 // //  Created by apple on 14-5-18. //  Copyright (c) 2014年  All rig ...

  3. Express 4 中如何使用connect-mongo

    正在跟随上面的教程一步一步做,在会话支持那一节中安装 connect-mongo 后,添加: var MongoStore = require('connect-mongo')(express); v ...

  4. Redis内存管理(一)

    Redis数据库的内存管理函数有关的文件为:zmalloc.h和zmalloc.c. Redis作者在编写内存管理模块时考虑到了查看系统内是否安装了TCMalloc或者Jemalloc模块,这两个是已 ...

  5. spring整合httpclient

    <beans xmlns="http://www.springframework.org/schema/beans" xmlns:context="http://w ...

  6. NYOJ题目1045看美女

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAskAAAK5CAIAAADCdSR7AAAgAElEQVR4nO3dP3Lbuv434HcT7r2Q1F

  7. CentOS7下Firewall防火墙配置用法详解

    官方文档地址: https://access.redhat.com/documentation/en-US/Red_Hat_Enterprise_Linux/7/html/Security_Guide ...

  8. Django搭建简易博客

    Django简易博客,主要实现了以下功能 连接数据库 创建超级用户与后台管理 利用django-admin-bootstrap美化界面 template,view与动态URL 多说评论功能 Markd ...

  9. Redis简介、与memcached比较、存储方式、应用场景、生产经验教训、安全设置、key的建议、安装和常用数据类型介绍、ServiceStack.Redis使用(1)

    1.NOSQL简介 nosql的产生并不是要彻底的代替关系型数据库,而是作为传统关系型数据库的一个补充. Facebook和360使用Cassandra来存储海量社交数据 Twitter在其url抓取 ...

  10. RecyclerView导入依赖包

    1. eclipse 上的导入: 如下进入Android SDK的如下路径, \android-sdk\extras\android\m2repository\com\android\support\ ...