代码下载：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. ogre3D学习基础10 -- 键盘控制与鼠标控制（缓冲控制）

    带缓冲的鼠标.键盘操作,这里的鼠标.按键事件会被各自的监听器捕获.其中OIS中定义的两个类MouseListener,KeyListener负责对事件的处理.我们需要使用这两个类的接口. 当一个键被按 ...

  2. Leetcode8--->String to Integer(实现字符串到整数的转换)

    题目: 实现字符串到整数的转换 解题思路: 下面给出这道题应该注意的一些细节: 1. 字符串“    123   ” = 123: 2.   字符串“+123” = 123: 3.   字符串“-12 ...

  3. python + selenium - selenium常用元素定位

    1. Chrome定位工具 打开Chrome浏览器,按F12会弹出开发者工具选项,选择Elements: 1)鼠标点击最左边箭头 2)鼠标滑动到页面中你要操作的元素,单击一下 3)对应的html元素内 ...

  4. 2017ICPC北京 J：Pangu and Stones

    #1636 : Pangu and Stones 时间限制:1000ms 单点时限:1000ms 内存限制:256MB 描述 In Chinese mythology, Pangu is the fi ...

  5. Welcome-to-Swift-11方法(Methods)

    方法是由特定类型关联起来的函数.类.结构体和枚举都能定义成实例方法.它封装了特定的任务和给定类型的实例的功能函数.类,结构体和方法也能定义类型方法,它只与类型的本身由关联.类型方法和Objective ...

  6. 【bzoj3252】攻略 贪心+DFS序+线段树

    题目描述 题目简述:树版[k取方格数] 众所周知,桂木桂马是攻略之神,开启攻略之神模式后,他可以同时攻略k部游戏. 今天他得到了一款新游戏<XX半岛>,这款游戏有n个场景(scene),某 ...

  7. [AtCoderContest010D]Decrementing

    [AtCoderContest010D]Decrementing 试题描述 There are \(N\) integers written on a blackboard. The \(i\)-th ...

  8. ActiveMQ使用经验与优化

    摘自:http://blog.csdn.net/m13321169565/article/details/8081314 1.1 不要频繁的建立和关闭连接 JMS使用长连接方式,一个程序,只要和JMS ...

  9. bzoj 4311 向量 时间线建线段树+凸包+三分

    题目大意 你要维护一个向量集合,支持以下操作: 1.插入一个向量(x,y) 2.删除插入的第i个向量 3.查询当前集合与(x,y)点积的最大值是多少.如果当前是空集输出0 分析 按时间线建线段树 大致 ...

  10. 学习在requirejs下如何使用underscore.js模板

    近期在学习underscore.js 这个小而美的js库,是前端 MVC 框架backbone依赖库,他的模板方法主要应用场景是ajax交互过程到页面需要大量的字符串拼接,这部分如果一旦不够仔细就很容 ...