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. iOS学习—— UISearchBar的使用

    转载自:http://blog.sina.com.cn/s/blog_7b9d64af0101dfg8.html 最近用到搜索功能.于是,经过不断的研究,终于,有点懂了. 那就来总结一下吧,好记性不如 ...

  2. 【T-SQL】系列文章全文目录（2017-06-26更新）

    本系列[T-SQL]主要是针对T-SQL的总结. SQL基础 [T-SQL基础]01.单表查询-几道sql查询题 [T-SQL基础]02.联接查询 [T-SQL基础]03.子查询 [T-SQL基础]0 ...

  3. [MV] - You Give REST a Bad Name

    本首歌改自Bon Jovi经典歌曲"You Give Love a Bad Name". 改编的作者是Dylan Beattie, 他是Spotlight的系统架构师. 改编后的歌 ...

  4. 【Spark篇】---Spark中内存管理和Shuffle参数调优

    一.前述 Spark内存管理 Spark执行应用程序时,Spark集群会启动Driver和Executor两种JVM进程,Driver负责创建SparkContext上下文,提交任务,task的分发等 ...

  5. BBS论坛（七）

    7.1.修改邮箱界面完成 (1)cms/cms_resetemail.html {% extends 'cms/cms_base.html' %} {% block title -%} 修改邮箱 {% ...

  6. 关于ML.NET v0.5的发布说明

    适逢.NET Conf 2018举办,ML.NET v0.5也正式宣布发布了.作为面向.NET开发人员的跨平台开源机器学习框架,新的预览版本在不断演变,每次发布除了有新的功能添加,API也会进行调整, ...

  7. Java基础8：深入理解内部类

    更多内容请关注微信公众号[Java技术江湖] 这是一位阿里 Java 工程师的技术小站,作者黄小斜,专注 Java 相关技术:SSM.SpringBoot.MySQL.分布式.中间件.集群.Linux ...

  8. Android总结篇系列：Activity中几个主要函数详解

    Activity作为Android系统中四大基本组件之一,包含大量的与其他的各大组件.intent.widget以及系统各项服务等之间的交互的函数.在此,本文主要选取实际项目开发中常用的,但完全理解又 ...

  9. [七]JavaIO之 PipedInputStream 和 PipedInputStream

    管道简介

  10. 用户及用户组管理(week1_day4)--技术流ken

    本节内容 useradd userdel usermod groupadd groupdel 用户管理 为什么需要有用户? 1. linux是一个多用户系统 2. 权限管理(权限最小化) 用户:存在的 ...