AngularJS的form状态变色
代码下载:https://files.cnblogs.com/files/xiandedanteng/angularjsChangeFormClass.rar
代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html ng-app="notesApp"> <head> <title> New Document </title> <style> .username.ng-valid{ background-color:lightgreen; } .username.ng-dirty.ng-invalid-required{ background-color:red; } .username.ng-dirty.ng-invalid-minlength{ background-color:lightpink; } </style> <meta charset="utf-8"> <script src="angular1.4.6.min.js"></script> </head> <body ng-controller="MainCtrl as ctrl"> <form ng-submit="ctrl.submit()" name="myForm"> <table> <tr> <td><input type="text" class="username" name="uname" ng-model="ctrl.user.username" required ng-minlength="4"/></td> <td> <span ng-show="myForm.uname.$error.required">This a required field</span> <span ng-show="myForm.uname.$error.minlength">Minimum length required is 4</span> <span ng-show="myForm.uname.$invalid">This field is invalid</span> </td> </tr> <tr> <td><input type="password" name="pwd" ng-model="ctrl.user.password" required/></td> <td> <span ng-show="myForm.pwd.$error.required">This a required field</span> </td> </tr> <tr> <td><input type="submit" value="Submit" ng-disabled="myForm.$invalid"/></td> <td> </tr> </table> </form> </body> </html> <script type="text/javascript"> <!-- angular.module('notesApp',[]) .controller('MainCtrl',[function(){ var self=this; self.submit=function(){ console.log("Username="+self.user.username+" Password="+self.user.password); alert("Form submitted."); }; }]); //--> </script>
效果:
AngularJS的form状态变色的更多相关文章
- 【Winform-GataGridView】根据DataGridView中的数据内容设置行的文字颜色、背景色 — 根据状态变色
C#中可以根据每行内容的不同来对DataGridView数据表格控制每行的文字颜色.背景颜色进行不同的设置. 效果如下: 实现: 在DataGridView的RowPrePaint事件中进行行颜色控制 ...
- angular-JS模仿Form表单提交
直接上示例代码,有不懂的欢迎留言: $http({ url: "http://localhost:10086/yuanxin/Conference/ImportExcelDataForBus ...
- 【python】列出http://www.cnblogs.com/xiandedanteng中所有博文的标题
代码: # 列出http://www.cnblogs.com/xiandedanteng中所有博文的标题 from bs4 import BeautifulSoup import requests u ...
- Node.js 网页爬虫再进阶,cheerio助力
任务还是读取博文标题. 读取app2.js // 内置http模块,提供了http服务器和客户端功能 var http=require("http"); // cheerio模块, ...
- Node.js 网页瘸腿稍强点爬虫再体验
这回爬虫走得好点了,每次正常读取文章数目总是一样的,但是有程序僵住了情况,不知什么原因. 代码如下: // 内置http模块,提供了http服务器和客户端功能 var http=require(&qu ...
- Node.js 网页瘸腿爬虫初体验
延续上一篇,想把自己博客的文档标题利用Node.js的request全提取出来,于是有了下面的初哥爬虫,水平有限,这只爬虫目前还有点瘸腿,请看官你指正了. // 内置http模块,提供了http服务器 ...
- AngularJS(一)
什么是AngularJS[双向数据绑定:从界面的操作能实时反映到数据,数据的变更能实时展现到界面.]?1.AngularJS 使得开发现代的单一页面应用程序(SPAs:Single Page Appl ...
- AngularJS:模型
ylbtech-AngularJS:模型 1.返回顶部 1. AngularJS ng-model 指令 ng-model 指令用于绑定应用程序数据到 HTML 控制器(input, select, ...
- AngularJS(五):表单及输入验证
本文也同步发表在我的公众号“我的天空” 表单基础 表单是HTML中很重要的一个部分,基本上我们的信息录入都依靠表单,接下来我们学习如何在AngularJS中使用表单,首先看以下示例代码: <bo ...
随机推荐
- 用asp.net+Jquery+Ajax+sqlserver编写的 (英语六级记单词)
开始(英语对程序员的重要性引用) 出处 英语的重要性已经毋庸置疑,对于程序员来说更甚,一些最新的技术资料是英文的,如果想进入外企英语也是一个很重要的条件.对于程序员来说怎样学习好英语,在此谈一下我的一 ...
- Spring core resourc层结构体系及JDK与Spring对classpath中资源的获取方式及结果对比
1. Spring core resourc层结构体系 1.1. Resource相关结构体系 1.2. ResourceLoader相关体系 2. JDK与Spring对classpath中资源的获 ...
- 大数据学习——spark学习
计算圆周率 [root@mini1 bin]# ./run-example SparkPi [root@mini1 bin]# ./run-example SparkPi [root@mini1 bi ...
- js中的原型哲学思想
https://segmentfault.com/a/1190000005824449 记得当年初试前端的时候,学习JavaScript过程中,原型问题一直让我疑惑许久,那时候捧着那本著名的红皮书,看 ...
- AutoEncoder and DenoiseAutoEncoder
AutoEncoder and DenoiseAutoEncoder 第一部分 首先我们将实现一个如上图结构的最简单的AutoEncoder. 加载数据 在这里,我们使用MNIST手写数据集来进行实验 ...
- Leetcode 466.统计重复个数
统计重复个数 定义由 n 个连接的字符串 s 组成字符串 S,即 S = [s,n].例如,["abc", 3]="abcabcabc". 另一方面,如果我们可 ...
- Mysql读写分离实例
吐槽:前天刚加完MQ,这回加读写分离.我也是醉了,但是弄完之后,就发现,似乎没我想的那么复杂,真的!另外,昨天试了一下用swagger编写API文档,太方便了,加上Mock service测试.这两天 ...
- C# TypeDescriptor获取类型转换器,实现泛型转换
需求背景 平时的coding过程中,经常性遇到string类型转换成其他的基本类型,如 int double bool等,那我们正常的方式就是下面的方式进行类型转换 int.Parse("1 ...
- hdu6085[压位+暴力] 2017多校5
/*hdu6085[压位+暴力] 2017多校5*/ /*强行优化..*/ #include <bits/stdc++.h> using namespace std; struct bit ...
- 【bzoj2802】[Poi2012]Warehouse Store 贪心+堆
题目描述 有一家专卖一种商品的店,考虑连续的n天.第i天上午会进货Ai件商品,中午的时候会有顾客需要购买Bi件商品,可以选择满足顾客的要求,或是无视掉他.如果要满足顾客的需求,就必须要有足够的库存.问 ...