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. python之定义参数模块argparse（二）高级使用 --传参为函数的实现

    我们在文章python之定义参数模块argparse的基本使用中介绍了argparse模块的基本使用方法 当前传入的参数只能是int.str.float.comlex类型,不能为函数,这有点不方便,但 ...

  2. VirtualBox虚拟机克隆迁移步骤

    VirtualBox是常用的虚拟机管理软件,和VMware一样,用的很多.在使用过程中,有的时候需要对虚拟机进行迁移.比如我们原来的服务器,使用的win10操作系统,上面利用VirtualBox安装了 ...

  3. Qt窗口定制

    qt中的QWidget窗口支持窗体绘制,但是不支持窗口标题栏绘制,想要美观的界面,还需要自己去定制,下面我就介绍一种定制窗体的方法 一个窗口无非就3部分,标题栏.窗体和状态栏,接下来我定制的窗口没有状 ...

  4. 在 Vue 结合 Axios 使用过程 中 post 方法，后台无法接受到数据问题

    关于在 vue 中 使用 axios 相关 bug 首先,我们来看下 axios 的 github 传送门 axios 然后我们再介绍下 axios 的作者的 github 传送门 Matt 最后,我 ...

  5. Java基础11：Java泛型详解

    本文对java的泛型的概念和使用做了详尽的介绍. 本文参考https://blog.csdn.net/s10461/article/details/53941091 具体代码在我的GitHub中可以找 ...

  6. Scrum到底是个神马玩意儿

    从前有一种非常火爆的体育运动,对阵双方各派出11位猛男,在宽阔的草皮球场内争抢一颗可怜的小皮球.哪方能够通过团队协作拿到皮球,并且运送到对方场地的特定位置即得分. 没错,你没有走错片场,快到超级碗里来 ...

  7. Linux基础知识第一讲,基本目录结构与基本命令

    目录 一丶Window 与 Linux的目录结构 1.Windows 与 Linux目录简介 2.Linux目录主要作用 3.任务栏与菜单栏,与关闭按钮 二丶Linux终端与常见命令学习 1.终端中的 ...

  8. SmartSql 类型处理器

    Nuget 安装 Install-Package SmartSql.TypeHandler -Version 3.0.1 SmartSql.TypeHandler 包括了俩种类型的类型处理程序: Js ...

  9. Docker 网络之进阶篇

    笔者在<Docker 基础 : 网络配置>一文中简单介绍了容器网络的基本用法,当时网络的基本使用方式还处于 --link 阶段.时过境迁,随着 docker 的快速发展,其网络架构也在不断 ...

  10. 【MongoDB】MongoDB环境配置

    软件下载与安装 1.mongDB下载,可到官网下载,我用的是3.4.6版本.可以放到任意目录下,我的MongDB安装目录为 D:\software\small_softeware\MongoDB 2. ...