AngularJS基础 ng-disabled 指令详解及简单示例

AngularJS ng-disabled 指令

AngularJS 实例

禁用或启用输入框:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.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>Female</option>
 <option>Male</option>
</select>

</body>
</html>

定义和用法

ng-disabled 指令设置表单输入字段的 disabled 属性(input, select, 或 textarea)。

如果 ng-disabled 中的表达式返回 true 则表单字段将被禁用。

语法

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

<input>, <select>, 和 <textarea> 元素都支持该指令。

参数值

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

以上就是对ng-disabled 指令的基础知识整理，后续继续补充相关知识。

赞 (0)

相关推荐

  • Angular.JS利用ng-disabled属性和ng-model实现禁用button效果

    Angular.JS利用ng-disabled属性和ng-model实现禁用button效果

    前言 本文要实现的效果是在输入框内无文字时,提交button是不能点击状态,在输入文字后会变为可点击状态,效果图如下: 实现方法: <div> <div> <textarea name="" id="" rows="3" class="form-control" ng-model="shyj" placeholder="在此输入审批意见"></t

  • AngularJS2中一种button切换效果的实现方法（二）

    AngularJS2中一种button切换效果的实现方法（二）

    之前用三目表达式和ng-class实现了按钮切换效果,似乎达到了我的预期,但是我觉得还有改进空间,网上找了一些资料,大概还有以下几种实现方式: 路由 <button class="btn1" routerLink="component1" routerLinkActive="active" type="submit">btn1</button> <button class="btn2&q

  • AngularJS基础 ng-model-options 指令简单示例

    AngularJS ng-model-options 指令 AngularJS 实例 在失去焦点时绑定输入框的值到 scope 变量中: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></scrip

  • Angular.js回顾ng-app和ng-model使用技巧

    Angular.js中index.html简单结构: <!doctype html> <html ng-app> <head> <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script> </head> <body> Your name: <input type="text" ng-model=&

  • AngularJS基础 ng-model 指令详解及示例代码

    AngularJS ng-model 指令 AngularJS 实例 绑定输入框的值到 scope 变量中: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </hea

  • angularjs自定义ng-model标签的属性

    angularjs自定义ng-model标签的属性

    有的时候我们需要为非input类型的元素添加ng-model来实现双向的数据绑定,从而减少冗余代码,那么可以尝试一下的方式 例如:我页面中使用了contenteditable这个属性来实现用户可直接编译的div元素 html: <style> .text{ margin:0 auto; width:100px; height:50px; border:1px solid red; } </style> </head> <body> <div ng-co

  • AngularJS基础 ng-disabled 指令详解及简单示例

    AngularJS ng-disabled 指令 AngularJS 实例 禁用或启用输入框: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> &

  • AngularJS ng-blur 指令详解及简单实例

    AngularJS ng-blur 指令 AngularJS 实例 当输入框失去焦点(onblur)时执行表达式: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </

  • Java基础之extends用法详解及简单实例

     Java extends用法详解 概要: 理解继承是理解面向对象程序设计的关键.在Java中,通过关键字extends继承一个已有的类,被继承的类称为父类(超类,基类),新的类称为子类(派生类).在Java中不允许多继承. (1)继承 class Animal{ void eat(){ System.out.println("Animal eat"); } void sleep(){ System.out.println("Animal sleep"); } vo

  • java 基础教程之多线程详解及简单实例

    java 多线程详解 在这篇文章里,我们关注多线程.多线程是一个复杂的话题,包含了很多内容,这篇文章主要关注线程的基本属性.如何创建线程.线程的状态切换以及线程通信. 线程是操作系统运行的基本单位,它被封装在进程中,一个进程可以包含多个线程.即使我们不手动创造线程,进程也会有一个默认的线程在运行. 对于JVM来说,当我们编写一个单线程的程序去运行时,JVM中也是有至少两个线程在运行,一个是我们创建的程序,一个是垃圾回收. 线程基本信息 我们可以通过Thread.currentThread()方法

  • AngularJs Forms详解及简单示例

    控件(input.select.textarea)是用户输入数据的一种方式.Form(表单)是这些控件的集合,目的是将相关的控件进行分组. 表单和控件提供了验证服务,所以用户可以收到无效输入的提示.这提供了更好的用户体验,因为用户可以立即获取到反馈,知道如何修正错误.请记住,虽然客户端验证在提供良好的用户体验中扮演重要的角色,但是它可以很简单地被绕过,因此,客户端验证是不可信的.服务端验证对于一个安全的应用来说仍然是必要的. 一.Simple form 理解双向数据绑定的关键directive是

  • AngularJs expression详解及简单示例

    表达式(Expressions)是类Javascript的代码片段,通常放置在绑定区域中(如{{expression}}).表达式通过$parse服务(http://code.angularjs.org/1.0.2/docs/api/ng.$parse)解析执行. 例如,以下是angular中有效的表达式: 1+2 3*10 | currency user.name 一.Angular表达式 vs. Js 表达式 这很容易让人将angular视图表达式联想为javascript表达式,但这并不完

  • Objective-C基础 自定义对象归档详解及简单实例

    自定义对象要实现归档必须实现NSCoding协议 NSCoding协议有两个方法,encodeWithCoder方法对对象的属性数据做编码处理,initWithCoder解码归档数据来初始化对象. 示例1 .h头文件 #import <Foundation/Foundation.h> @interface user : NSObject <NSCoding> @property(nonatomic,retain)NSString *name; @property(nonatomic

  • Docker-client for python详解及简单示例

    Docker-client for python使用指南: 客户端初始化的三种方法 import docker docker.api() docker.APIClient() docker.client() docker.DockerClient() 其实也是docker.client()的一个子集 docker.from_env() 其实就是docker.client()的一个子集 一.初始化客户端 1.Docker客户端的初始化工作 >>> import docker >>

  • Java 散列存储详解及简单示例

    Java 散列存储 Java中散列存储的数据结构主要是指HashSet.HashMap.LinkedHashSet.LinkedHashMap以及HashTable等.要理解Java中的散列存储机制,那么我们必须先理解两个方法:equals()和hashCode().关于equals()方法以及其与"=="关系操作符的区别,我们在另一篇文章中已经说明了.而对于hashCode(),它是在Object类中定义的一个方法: public native int hashCode(); 这是一

  • C语言 结构体和指针详解及简单示例

    指针也可以指向一个结构体,定义的形式一般为: struct 结构体名 *变量名; 下面是一个定义结构体指针的实例: struct stu{ char *name; //姓名 int num; //学号 int age; //年龄 char group; //所在小组 float score; //成绩 } stu1 = { "Tom", 12, 18, 'A', 136.5 }; //结构体指针struct stu *pstu = &stu1; 也可以在定义结构体的同时定义结构

随机推荐