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. iOS开发－Object-C学习之结构体使用

    前言:定义结构体并不是定义一个变量,而是定义了种数据类型. 结构体作用: 结构体和其他类型基础数据类型一样,例如int类型,char类型 只不过结构体可以做成你想要的数据类型.以方便日后的使用. 在实 ...

  2. HTML5特性

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

  3. HTML5之坦克大战游戏开发

    1.在使用arc方法进行画圆时,在IE9+,FF,Safari,Chrome等已经支持HTML5标准的浏览器中进行渲染时,采用逆时针方向画时,也就是说 arc(x, y, radius, startA ...

  4. C# 6.0语法糖剖析

    C# 6.0语法糖剖析 2016年12月16日 16:10:27 阅读数:586   版权声明:本文为博主http://www.feixueteam.net原创文章,未经博主允许不得转载. https ...

  5. ie6、ie7下JSON.parse JSON未定义的解决方法

    解决方法一: var jsons = req.responseText; var s; if (typeof(JSON) == 'undefined'){ s = eval("(" ...

  6. Java 8里 Stream和parallelStream的区别

    Java中Stream和parallelStream,前者是单管,后者是多管,运行时间上做一个小对比,直接上代码: /** * * @author zhangy6 * <p>对比Strea ...

  7. MySql（一）：linux 安装mysql数据库——yum安装法

    mysql数据库有多种安装方式,本文只介绍在Linux服务器上最实用.最快捷的mysql server安装方法.一.Linux服务器yum安装(CentOS6.3 64位)所有在服务器上执行的命令,都 ...

  8. C#微信公众号学习 - (一)测试账号申请

    主要分为两部分: 1.创建C#的项目,并发布, 2.微信填写发布的地址进行开发者验证. 一. VS环境为VS2017,创建项目时,自带的一些东西发布会导致各种错误,无奈,创建了空项目aspx窗体,如下 ...

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

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

  10. 使用pycharm手动搭建python语言django开发环境（三） 使用django的apps应用 添加应用静态文件

    1)在django 工程目录中使用cmd命令行 敲入"python manage.py startapp app名称(例子为blog)" 2)在django工程目录中应该生成了bl ...