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. Jason Wang: 结对编程 CountWord(第三次作业)

    本次作业地址: https://edu.cnblogs.com/campus/xnsy/SoftwareEngineeringClass1/homework/2882 学号: 201731072323 ...

  2. vue框架中的Axios封装

      function axios(options) {     let promise = new Promise((resolve, reject) => {         var xhr ...

  3. git push 时提示用户名或密码相关错误信息

    这里讲的是一个常见的第一次push提示输入用户名密码时,输入错误的解决办法.它导致在后面其他项目什么的在push的时候一直失败,并提示有用户名密码错误信息. 第一步:进入到“控制面板” (这里如何进入 ...

  4. python连接Linux命令行

    #!/usr/bin/python # -*- coding: utf-8 -*- '''https://www.ibm.com/developerworks/cn/linux/l-cn-pexpec ...

  5. 排查线上问题常用的几个Linux命令

    top 相当于Windows任务管理器 可以看到,输出结果分两部分,前5行是总览,下面是具体的进程资源占用情况.下面逐行看一下 第1行 top - 18:14:58 up 112 days,  1:3 ...

  6. 代码实现PHP web服务器下绝对路径到Web网址的转换

    代码实现PHP web服务器下绝对路径到Web网址的转换 代码中用到几个系统变量或常量: 1. 路径中各目录分隔字符 DIRECTORY_SEPARATOR(常量),Windows下DIRECTORY ...

  7. ConcurrentModificationException 异常处理

    在工作中碰到有个异常:java.util.ConcurrentModificationException 腾讯bugly工具给出的解决方案和说明如下:该异常表示迭代器迭代过程中,迭代的对象发生了改变, ...

  8. Java设计模式学习总结

    设计模式基础学习总结 这篇总结主要是基于我之前设计模式基础系列文章而形成的的.主要是把重要的知识点用自己的话说了一遍,可能会有一些错误,还望见谅和指点.谢谢 更多详细内容可以查看我的专栏文章:设计模式 ...

  9. Java IO模型

    Linux的内核将所有外部设备都看做一个文件来操作,对一个文件的读写操作会调用内核提供的系统命令,返回一个file descriptor(fd,文件描述符).而对一个Socket的读写也会有相应的描述 ...

  10. C#2.0之可空类型

    可空类型Nullable<T> 在C#2.0之前 ,值类型一直不可以为null,但是实际开发中常常会有这样的需求,比如结束时间. 为什么不可以为null 对于引用类型来说,null代表着空 ...