代码下载：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状态变色的更多相关文章

  1. 【Winform-GataGridView】根据DataGridView中的数据内容设置行的文字颜色、背景色 — 根据状态变色

    C#中可以根据每行内容的不同来对DataGridView数据表格控制每行的文字颜色.背景颜色进行不同的设置. 效果如下: 实现: 在DataGridView的RowPrePaint事件中进行行颜色控制 ...

  2. angular-JS模仿Form表单提交

    直接上示例代码,有不懂的欢迎留言: $http({ url: "http://localhost:10086/yuanxin/Conference/ImportExcelDataForBus ...

  3. 【python】列出http://www.cnblogs.com/xiandedanteng中所有博文的标题

    代码: # 列出http://www.cnblogs.com/xiandedanteng中所有博文的标题 from bs4 import BeautifulSoup import requests u ...

  4. Node.js 网页爬虫再进阶，cheerio助力

    任务还是读取博文标题. 读取app2.js // 内置http模块,提供了http服务器和客户端功能 var http=require("http"); // cheerio模块, ...

  5. Node.js 网页瘸腿稍强点爬虫再体验

    这回爬虫走得好点了,每次正常读取文章数目总是一样的,但是有程序僵住了情况,不知什么原因. 代码如下: // 内置http模块,提供了http服务器和客户端功能 var http=require(&qu ...

  6. Node.js 网页瘸腿爬虫初体验

    延续上一篇,想把自己博客的文档标题利用Node.js的request全提取出来,于是有了下面的初哥爬虫,水平有限,这只爬虫目前还有点瘸腿,请看官你指正了. // 内置http模块,提供了http服务器 ...

  7. AngularJS（一）

    什么是AngularJS[双向数据绑定:从界面的操作能实时反映到数据,数据的变更能实时展现到界面.]?1.AngularJS 使得开发现代的单一页面应用程序(SPAs:Single Page Appl ...

  8. AngularJS：模型

    ylbtech-AngularJS:模型 1.返回顶部 1. AngularJS ng-model 指令 ng-model 指令用于绑定应用程序数据到 HTML 控制器(input, select, ...

  9. AngularJS（五）：表单及输入验证

    本文也同步发表在我的公众号“我的天空” 表单基础 表单是HTML中很重要的一个部分,基本上我们的信息录入都依靠表单,接下来我们学习如何在AngularJS中使用表单,首先看以下示例代码: <bo ...

随机推荐

  1. CornerStone使用教程（配置SVN，HTTP及svn简单使用）

    1.SVN配置 假设你公司svn地址为:svn://192.168.1.111/svn/ios,用户名:svnserver,密码:123456 1:填写主机地址 2:如果你的主机地址中有端口号,如为1 ...

  2. jmeter非常好的博客收藏

    http://blog.sina.com.cn/s/blog_56c9b55c010148os.html

  3. [转]如何把嵌套的python list转成一个一维的python list?

    import itertools a = [[1,2,3],[4,5,6], [7], [8,9]] out = list(itertools.chain.from_iterable(a))

  4. PHP变量的生命周期

    变量不仅有其特定的作用范围,还有其存活的周期--生命周期.变量的生命周期指的是变量可被使用的一个时间段,在这个时间段内变量是有效的,一旦超出这个时间段变量就会失效,我们就不能够再访问到该变量的值了. ...

  5. URAL 1033 Labyrinth

    E - Labyrinth Time Limit:1000MS     Memory Limit:65536KB     64bit IO Format:%I64d & %I64u Submi ...

  6. BZOJ-3040 最短路

    最短路+堆优化. 普通的堆还不行,自己用的是配对堆(貌似斐波那契堆也行?毕竟理论复杂度) 然后发现自己的配对堆比云神的不知快了多少...我照着他的模版打的喂.. 然后发现前T条边不理都能A... 数据 ...

  7. HDU-1853 Cyclic Tour

    最小权值环覆盖问题:用几个环把所有点覆盖,求所选取的边最小的权值之和. 拆点思想+求最小转求最大+KM算法 #include <cstdlib> #include <cstdio&g ...

  8. openstack是什么？能干什么？

    openstack是什么?能干什么?涉及的初衷是什么?由什么来组成?刚接触openstack,说openstack不是一个软件,而是由多个组件进行组合,这是一个更深层次的理解,当我们看到dashboa ...

  9. BZOJ1064 [Noi2008]假面舞会 【dfs】

    题目 一年一度的假面舞会又开始了,栋栋也兴致勃勃的参加了今年的舞会.今年的面具都是主办方特别定制的.每个参加舞会的人都可以在入场时选择一 个自己喜欢的面具.每个面具都有一个编号,主办方会把此编号告诉拿 ...

  10. bzoj 3533 [Sdoi2014]向量集 线段树+凸包+三分(+动态开数组) 好题

    题目大意 维护一个向量集合,在线支持以下操作: "A x y (|x|,|y| < =10^8)":加入向量(x,y); "Q x y l r (|x|,|y| & ...