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

　　　　ng-disabled 指令：ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性。
　　　　ng-show 指令：ng-show 指令隐藏或显示一个 HTML 元素。
　　　　ng-hide 指令：ng-hide 指令用于隐藏或显示 HTML 元素。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <script src="js/angular.min.js"></script>

</head>

<body>

    <div ng-app="myApp" ng-controller="myCtrl">

        <!-- ng-disabled 指令 -->

        <p>

            <button ng-disabled="mySwitch">点我!</button>

        </p>

        <p>

            <input type="checkbox" ng-model="mySwitch">按钮

        </p>

        <p>

            {{ mySwitch }}

        </p>

        <!-- ng-show 指令 -->

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

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

        <!-- ng-hide 指令 -->

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

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

    </div>

</body>

</html>

<script>

    var app = angular.module('myApp', []);

    app.controller('myCtrl', function ($scope) {

        $scope.firstName = "John";

        $scope.lastName = "Doe";

    });

</script>

AngularJS学习之旅—AngularJS HTML DOM(十三)的更多相关文章

  1. AngularJS学习之旅—AngularJS 模块(十五)

    一.AngularJS 模块 模块定义了一个应用程序. 模块是应用程序中不同部分的容器. 模块是应用控制器的容器. 控制器通常属于一个模块. 1.创建模块 通过 AngularJS 的 angular ...

  2. AngularJS学习之旅—AngularJS 控制器(六)

    1.AngularJS 控制器 AngularJS 应用程序被控制器控制. ng-controller 指令定义了应用程序控制器. 控制器是 JavaScript 对象,由标准的 JavaScript ...

  3. AngularJS学习之旅—AngularJS 指令(三)

    1.AngularJS 指令 AngularJS 通过被称为 指令 的新属性来扩展 HTML. AngularJS 通过内置的指令来为应用添加功能. AngularJS 允许你自定义指令.2.Angu ...

  4. AngularJS学习之旅—AngularJS 表达式(二)

    1.AngularJS 表达式 AngularJS 表达式写在双大括号内:{{ expression }}. AngularJS 表达式把数据绑定到 HTML,这与 ng-bind 指令有异曲同工之妙 ...

  5. AngularJS学习之旅—AngularJS 服务(八)

    1.AngularJS 服务(Service) AngularJS 中你可以创建自己的服务,或使用内建服务.2.什么是服务? 在 AngularJS 中,服务是一个函数或对象,可在你的 Angular ...

  6. AngularJS学习之旅—AngularJS Scope作用域(五)

    1.AngularJS Scope(作用域) Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带. Scope 是一个对象,有可用的方法和属性. Sco ...

  7. AngularJS学习之旅—AngularJS 表单(十六)

    一.AngularJS 表单 AngularJS 表单是输入控件的集合. HTML 控件 以下 HTML input 元素被称为 HTML 控件: input 元素 select 元素 button ...

  8. AngularJS学习之旅—AngularJS 事件(十四)

    1.AngularJS 事件 ng-click ( 适用标签 :所有,触发事件:单击): ng-dblclick( 适用标签 :所有,触发事件:双击): ng-blur(适用标签 : a,input, ...

  9. AngularJS学习之旅—AngularJS Table(十一)

    1.AngularJS 表格 1. ng-repeat 指令可以完美的显示表格 AngularJS 实例 <!DOCTYPE html> <html> <head> ...

随机推荐

  1. 我们为什么要搞长沙.NET技术社区？

    我们为什么要搞长沙.NET技术社区? 感谢大家的关注,请允许我冒昧的向大家汇报长沙.NET技术社区第一次交流会的会议进展情况. 活动过程汇报 2019年2月17日,继深圳,广州,西安,成都,苏州相继成 ...

  2. Python档案袋（ 进程与协程 ）

    Python的进程和线程是使用的操作系统的原生线程和进程,其是去调用操作系统的相应接口实现 进程:之间不可直接共享数据,是资源的集合,进程必须有一个线程 线程:基于进程,之间可直接共享数据,可执行,只 ...

  3. Chorme浏览器渲染MathJax时出现竖线的解决方法

    Chorme浏览器渲染MathJax时出现竖线的原因分析与解决方法 查资料知,Chorme中显示MathJax时出现竖线的原因如下: 新版的Chorme浏览器在解析css时,会对其中的值进行向上取整( ...

  4. VueJs 监听 window.resize 方法

    Vuejs 本身就是一个 MVVM 的框架. 但是在监听 window 上的 事件 时,往往会显得 力不从心. 比如 这次是 window.resize 恩,我做之前也是百度了一下.看到大家伙都为这个 ...

  5. 实现一个简单的WebSocket聊天室

    WebSocket 简介 WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议. WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主 ...

  6. RDIFramework.NET ━ .NET快速信息化系统开发框架 V3.2->Web版本新增新的角色授权管理界面效率更高、更规范

    角色授权管理模块主要是对角色的相应权限进行集中设置.在角色权限管理模块中,管理员可以添加或移除指定角色所包含的用户.可以分配或授予指定角色的模块(菜单)的访问权限.可以收回或分配指定角色的操作(功能) ...

  7. [ SSH框架 ] Spring框架学习之一

    一.Spring概述 1.1 什么是Spring Spring是一个开源框架, Spring是于2003年兴起的一个轻量级的Java开发框架,由 Rod Johnson在其著作 Expert One- ...

  8. [十五]javaIO之SequenceInputStream

    功能简介   SequenceInputStream  合并流 顾名思义,就是可以吧两个流合并起来   他并没有很复杂,单纯的很,仅仅实现了InputStream 他拥有两个构造方法把两个InputS ...

  9. Oracle最新的Sql笔试题及答案

    部门表(SM_DEPT) 字段名称 数据类型 是否主键 注释 DEPT_ID NUMBER Y 部门ID PARENT_DEPARTMENT_ID NUMBER N 上级部门 DEPARTMENT_N ...

  10. celery4+django2定时任务

    网上有很多celery + django实现定时任务的教程,不过它们大多数是基于djcelery + celery3的: 或者是使用django_celery_beat配置较为繁琐的. 显然简洁而高效 ...