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开发－项目的完整重命名方法，图文教程。

    前言:在IOS开发中,有时候想改一下项目的名字,都会遇到很多麻烦.直接改项目名吧,XCODE又不会帮你改所有的名字.总是有很多文件.文件夹或者是项目设置的项.而且都是不能随便改的,有时候改着改着,编译 ...

  2. ibatis 动态列查询问题解决

      http://hi.baidu.com/java513/blog/item/ace7c516c400390d4a90a7c8.html   这个问题是因为你查询的sql的列是变化的,但是ibati ...

  3. Linux 性能监控 —— Load Average

    一. 简单介绍 top. uptime. cat /proc/loadavg 命令中 Load average: 4.90, 5.51, 5.77        整体含义: 正在执行的任务数量 + 排 ...

  4. 2B01-View-Switcher

    Gallery和swithcer联合使用 /* * Copyright (C) 2007 The Android Open Source Project * * Licensed under the ...

  5. spring过滤器和拦截器的区别和联系

    一 简介 (1)过滤器: 依赖于servlet容器,是JavaEE标准,是在请求进入容器之后,还未进入Servlet之前进行预处理,并且在请求结束返回给前端这之间进行后期处理.在实现上基于函数回调,可 ...

  6. ThreadLocal使用方法

      创建一个Bean,通过不同的线程对象设置Bean属性,保证各个线程Bean对象的独立性.   /**  * Created by IntelliJ IDEA.  * User: leizhimin ...

  7. Anaconda+Tensorflow环境安装与配置（转载）

    Anaconda+Tensorflow环境安装与配置 转载请注明出处:http://www.cnblogs.com/willnote/p/6746499.html Anaconda安装 在清华大学 T ...

  8. 文件上传下载：commons-fileupload + Servlet 2.5

    数据库:MySQL 开发技术:JSP + Servlet 2.5 第三方的上传组件: commons-fileupload connons-io 上传页面1.form表单需要增加:enctype=&q ...

  9. Proving NP-completeness

    Proving NP-completeness by generalization. For each of the problems below, prove that it is NP-compl ...

  10. OpenCV中Kinect的使用（3）

    接OpenCV中Kinect的使用(2),下面内容主要讲述使用OpenNI 控制Kinect 的马达,实现摄像头的上下摆动. 下面是透过OpenNI比较低阶的USB控制介面(XnUSB.h),来做到马 ...