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. 纪念我人生中第一个merge into语句

    做按组织关系汇总功能时,当数据量特别大,或者汇总组织特别多时,运行效率特别低,于是使用了merge into语句. 代码如下: public void updateInsertData(DataSet ...

  2. oc自定义不定参数函数

    -(void)getValueFormConfig:(NSString *)key,... or -(void)getValueFormConfig:(NSString *)key,...NS_REQ ...

  3. Spring核心项目及微服务架构方向

    spring 顶级项目:Spring IO platform:用于系统部署,是可集成的,构建现代化应用的版本平台,具体来说当你使用maven dependency引入spring jar包时它就在工作 ...

  4. 非常酷的 Javascript 简单调试工具Blackbird

    Blackbird 是一个开源的 Javascript 调试工具,默认提供一种非常酷的方式展现 Javascript 调试信息,如下图,效果如何呢? 在我们的日常的学习或工作中,经常都会接触到 Jav ...

  5. unity, 对于Debug.Log输出的log，可以双击定位到代码

    unity, 对于Debug.Log输出的log,可以双击定位到代码

  6. C# 泛型方法

    泛型方法是使用类型参数声明的方法,如下所示: static void Swap<T>(ref T lhs, ref T rhs) { T temp; temp = lhs; lhs = r ...

  7. valgrind的编译和使用

    ubuntu 平台: valgrind 3.8.1 一. 编译 ./configure --prefix=/home/frank/test/valgrind/PC/local 报错:checking ...

  8. AudioToolKit的简单介绍及教程

    AudioToolKit的简单介绍及教程 (2013-02-21 09:29:18) 转载▼ 标签: 游戏开发 unity3d教程 unity3d unity it 分类: Unity3d之插件篇 原 ...

  9. python语言 buffer类型数据的使用 'ascii' codec can't decode byte 0xe5 问题的解决

    在python中我们使用buffer类型时可以将其转换为str类型. 如果obejct的类型为<type 'buffer'> ,可以使用str(object)将其转换为字符串类型. 在转换 ...

  10. iOS开发--用户点击频繁，多个异步网络请求取消问题？

    一.业务环境描述 当一个view同时添加两个tableView为subView的时候,两个tableView分别为mainTable和subTable. 当用户点击mainTable上的某一条数据时, ...