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. android:ellipsize实现跑马灯效果总结

    最近无意间看到了涉及到跑马灯效果的代码,于是在网上查阅了很多资料,在这里对自己看的一些文章进行一下总结,顺便加上自己的一些体会. 让我们一步步逐渐向下. 首先我们要实现走马灯这样一个效果,通常来说都是 ...

  2. PHP-手册阅读

    配置选项: html_errors: 无意义的 HTML 标记符会使得出错信息很凌乱, 所以在外壳下阅读报错信息是十分困难的, 因此将该选项的默认值改为 FALSE implicit_flush: 在 ...

  3. Smooks转换设计

    Smooks转换设计 背景 不同的合作银行对应的外部接口是不一样的,我们需要把外部这些变化不定的接口格式,转换为我们银保通系统可以识别的内部接口.Smooks可以很好的解决这一问题.并且,当合作银行的 ...

  4. 【MyBatis学习03】原始dao开发方法及其弊端

    上一篇博文总结了一下mybatis的入门,接下来就要开发dao方法了,这篇博文主要总结一下mybatis中原始dao开发的方法,最后并总结一下原始dao开发方法的弊端.mybatis中dao开发应该使 ...

  5. mysql bin路径下的mysql被杀毒软件查杀后恢复过来也无法启动

    mysql服务被杀毒软件干掉之后操作 文件恢复过来后还是无法启动 同事使用杀毒软件之后发现,mysql的服务被干掉了.之后想到了处理办法: mysqld-nt -installnet start my ...

  6. select/poll/epoll原理探究及总结

    select,poll,epoll都是IO多路复用的机制.I/O多路复用就通过一种机制,可以监视多个描述符,一旦某个描述符就绪(一般是读就绪或者写就绪),能够通知程序进行相应的读写操作.但select ...

  7. docker发布spring cloud应用

    原文地址:http://www.cnblogs.com/skyblog/p/5163691.html 本文涉及到的项目: cloud-simple-docker:一个简单的spring boot应用 ...

  8. 【转载】IE下利用滤镜实现背景颜色渐变

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. crontab执行脚本与手动执行结果不一致

    反正网上说是环境变量问题,我就直接在脚本第二行加入以下代码: source /etc/profile source ~/.bashrc 问题是解决了!

  10. iconv c 代码学习

    (struct stringpool_t *)0)->stringpool_str15 含义为: 1.创建一个结构体stringpool_t 指针(struct stringpool_t *) ...