1.适用范围

该指令适用于<input>, <select>,<button> 和 <textarea> 元素。

2.用法解析

ng-disabled 指令设置表单输入字段的 disabled 属性(input, select, 或 textarea)。
如果 ng-disabled 中的表达式返回 true 则表单字段将被禁用。</textarea></p>

 <input ng-disabled="expression"></input>

　　

注：

expression 如果表达式返回true，则设置为元素添加 disabled 属性。

3.案例

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="https://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

</head>

<body ng-app="">

选中复选框禁用所有表单输入域:<input type="checkbox" ng-model="all"><br>

<br>

<input type="text" ng-disabled="all">

<input type="radio" ng-disabled="all">

<select ng-disabled="all">

  <option>先生</option>

  <option>女士</option>

</select>

<button ng-disabled="all">按钮</button>

</body>

</html>

4.项目应用

需求：初始按钮正常可点状态，点击之后（发送请求之前）将按钮置灰色（禁用），以阻止多次无效的点击，请求完成之后按钮可用。

代码如下：

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>ng-disabled</title>

 <link href="https://cdn.bootcss.com/ionic/1.3.2/css/ionic.css" rel="stylesheet">

 <script src="https://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

 </head>

 <body ng-app="myApp" ng-controller='AppCtrl'>

 <button class="button button-positive" ng-click="skip()" ng-disabled="button_clicked">Click Me</button>

 </body>

 <script type="text/javascript">

 angular.module('myApp', [])

 .controller('AppCtrl', function($http,$scope) {

 $scope.button_clicked = false;//按钮初始状态可用

 $scope.skip = function() {

 alert("Clicked!");

 $scope.button_clicked = true;//点击之后按钮禁用

 //    return false;

 }

 //url是请求的接口，这里暂时写成伪代码 防止报错写成字符串形式

 $http.get('url')

 .success(function(response){

 alert('请求成功！');

 $scope.button_clicked = false;//按钮可用

 });

 })

 </script>

 </html>

运行一下：

ng-disabled的使用的更多相关文章

  1. Caffe学习系列(14)：初识数据可视化

    //   首先将caffe的根目录作为当前目录,然后加载caffe程序自带的小猫图片,并显示. 图片大小为360x480,三通道 In [1]: import numpy as np import m ...

  2. 汇编语言标志位 含义 NV UP EI NG NZ AC PE CY

    缩写原意: Overflow of = OV NV [No Overflow] Direction df = DN (decrement) UP (increment) Interrupt if = ...

  3. 汇编语言标记寄存器标记位_NV UP EI NG NZ AC PE CY

    在8086CPU中,有一种标记寄存器,长度为16bit: 其中存储的信息被称为程序状态字(Program Status Word,PSW),以下将该寄存器简称为flag. 功能:1)用来存储相关指令的 ...

  4. ng 手机验证码验证/发送（含倒计时）

    ng 的手机号码进行验证: 1.在对应的ts文件中,先声明一个变量 private mobile: string private btnCaptchaText: string = '发送验证码'   ...

  5. 计算Div标签内Checkbox个数或已被disabled的个数

    先看下面的html: 计算div内的checkbox个数:$('#divmod input[type="checkbox"]').length 计算div内checkbox被dis ...

  6. javascript 设置input框只读属性 获取disabled后的值并传给后台

    input只读属性   有两种方式可以实现input的只读效果:disabled 和 readonly. 自然两种出来的效果都是只能读取不能编辑,可是两者有很大不同. Disabled说明该input ...

  7. 表单中Readonly和Disabled的区别

    1.readonly是要锁定这个控件,通过在界面上无法修改他(但是通过javascript可以修改他). 2.disabled和readonly有相同的地方也是可以锁定这个控件用户不能改变他的值,但是 ...

  8. 【码在江湖】前端少侠的json故事（中）ng的json

    ng的json 正所谓"人在江湖,身不由己",在开发之路上前端少侠dk遇到过种种困难,尤其在与后端进行数据对接的时候,不得不逼迫自己以极快的速度去学习和掌握一些奇招怪式,正当他以为 ...

  9. 移动端css知识总结--字体，毛玻璃效果，input和disabled

    移动端字体使用: font-family: Helvetica,sans-serif;我看这也是天猫使用的 透过背景看其他元素模糊,自身元素不模糊:-webkit-backdrop-filter: s ...

  10. 不知道张(zhāng)雱（pāng）是谁？你out了！

    张(zhāng)雱(pāng)是谁?也许你已经听说过了,也许你还没听说过呢,不过你一定听说过老刘——刘强东,没错,这二人是有关系的,什么关系,京东是老刘的,而张雱呢?张雱是京东旗下52家关联公司法人代 ...

随机推荐

  1. python 爬取王者荣耀高清壁纸

    代码地址如下:http://www.demodashi.com/demo/13104.html 一.前言 打过王者的童鞋一般都会喜欢里边设计出来的英雄吧,特别想把王者荣耀的英雄的高清图片当成电脑桌面 ...

  2. iOS UIButton文字和图片间距随意调整

    代码地址如下:http://www.demodashi.com/demo/11606.html 前记 在开发中,我们经常会遇到这么一种情况,就是一个按钮上面有图片也有文字,但是往往设计并不是我们想要的 ...

  3. HTML5特性

    HTML5规范围绕如何使用新增标记定义了大量Javascript API,其中一些API与DOM重叠,定义了浏览器应该支持DOM拓展. 1.与类相关的扩充 HTML5新增了getElementsByC ...

  4. L​i​n​u​x​关​闭​防​火​墙​命​令

    (1) 重启后永久性生效: 开启: chkconfig iptables on 关闭: chkconfig iptables off (2) 即时生效,重启后失效: 开启: service iptab ...

  5. html x

    使用 Target 属性,下面的这行会在新窗口打开文档:<a href="http://www.w3school.com.cn/" target="_blank&q ...

  6. CONFIG_*头文件的配置

    通常在kernel或uboot中, 有很多以CONFIG_*开头的宏配置选项,并且保存在相应的头文件中,那么这些CONFIG_*是怎么生成的呢? 在uboot的顶层Makefile中,有这么一项: 此 ...

  7. SQL数据库查询练习题

    一.            设有一数据库,包括四个表:学生表(Student).课程表(Course).成绩表(Score)以及教师信息表(Teacher).四个表的结构分别如表1-1的表(一)~表( ...

  8. Java并发编程（十四）并发容器类

    同步容器将所有对容器状态的访问都串行化,以实现线程安全性.这种方法的代价是严重降低并发性,当多个线程竞争容器的锁时,吞吐量将严重减低. 另一个方面,并发容器是针对多个线程并发访问设计的.在java 5 ...

  9. 【原创】菜鸟版Android 笔记1- Android架构和Application

    Android架构 图1 Android架构自上而下名称为应用层.应用框架层.运行库和Adroid虚拟机层. Linux内核层. 1. 应用层 应用层像一座大厦里面的砖瓦.我们所做的开发基本上都在应用 ...

  10. Python 安装 MaxMind GeoLite City

    1.先安装 geoip c library  geoip c library >= 1.4.6 installed on your machine. >= 1.4.6 installed ...