<!DOCTYPE html>

<html ng-app="app">

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            .error{

                background-color: red;

                color: #FFF;

                transition:all linear 0.5s;

            }

            .my-form.ng-invalid{

                background-color: red;

            }

            .my-form{

                transition: all linear 0.5s;

            }

        </style>

    </head>

    <body>

        <form name="myForm" class="my-form" ng-controller="ExampleController">

            <label>userName: <input type="text" name="userName" ng-model="user.name" required="required" ng-minLength="10" ng-maxLength="20"/></label>

            <p class="error" ng-show="!myForm.userName.$valid">校验没有通过，大傻子</p>

            <p class="error" ng-show="myForm.userName.$error.required">这个是必填项，大傻子</p>

            <p>user:{{user.name}}</p>

            <p>{{myForm.userName.$valid}}</p>

            <p>{{myForm.userName.$error}}</p>

            <p>{{myForm.userName.$dirty}}</p>

            <p>empty: {{myForm.userName.$empty}}</p>

            <p ng-show="myForm.userName.$error.minlength">太短了</p>

            <p ng-show="myForm.userName.$error.maxlength">太长了</p>

            <br /><br /><br />

            <p>{{myForm.$error.required}}</p>

            <p>{{myForm.$error.minlength}}</p>

            <p>{{myForm.$error.maxlength}}</p>

        </form>

        <script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>

        <script type="text/javascript">

            var app = angular.module('app' , []);

            app.controller('ExampleController' , ['$scope' , function($scope){

            }]);

        </script>

    </body>

</html>

angular.js input的更多相关文章

  1. MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录

    注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...

  2. (翻译)Angular.js为什么如此火呢？

    在本文中让我们来逐步发掘angular为什么如此火: Angular.js 是一个MV*(Model-View-Whatever,不管是MVC或者MVVM,统归MDV(model Drive View ...

  3. Angular.js通过bootstrap实现经典的表单提交

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel= ...

  4. Angular JS 学习之Bootstrap

    1.要使用Bootstrap框架,必须在<head>中加入链接: <link rel="stylesheet" href="//maxcdn.boots ...

  5. angular学习input输入框筛选

    学习angular,看到 angular-phonecat测试用例,照着教程运行了一遍,对于初学者有点不是很理解angular 帅选代码的意思,于是找教材,参考资料,明白了input筛选原来这么简单. ...

  6. angular js 的 ng-keyup 监听 keydown keyup事件获取 keyCode

    参考这个页面.http://www.angularjshub.com/examples/eventhandlers/keyboardevents/ Html页面代码: <input ng-mod ...

  7. angular.js 例子

    angular.js是一个前端的MVC框架,12年的时候曾近在一个portal平台的项目中使用过. 下面给出一个angular.js的典型例子,涵盖一些基础的知识点,用以复习备忘: <html ...

  8. 学习angular.js的一些笔记想法(上)

    1.data-ng-app与ng-app的区别 data-ng-app是为了h5不报错 2.ng-class 不多说就来拿例子说吧 html代码 <div class='color-change ...

  9. Angular JS学习之指令

    1.Angular JS通过称为指令的新属性来扩展HTML:通过内置的指令来为应用添加功能: 2.AngularJS指令:AngularJS指令是扩展的HTML属性,带有前缀ng-: **ng-app ...

随机推荐

  1. css\html布局及部分知识小分享~~~

    近期发现和总结的知识跟大侠们分享,请大侠们多多评论指教一二?  HTML 1.(1)body需设置页面默认字体大小 body{font-size:12px;} (2)IE6下png图片划过切换失效,建 ...

  2. android代码嵌入html代码

    有时候需要在一个TextView控件中设置两种不同颜色的字体,这时候可以使用Html.fromHtml方法实现 例如: tvTaskDesc.setText(Html.fromHtml("当 ...

  3. DbUtils常用API的使用 方便以后查阅

    package com.lizhou.Test; import java.sql.SQLException; import java.util.List; import java.util.Map; ...

  4. Octopus系列之数据上传格式要求说明

    各个数据列要求 价格列:字符串类型[美元价格] 产品名字:可以支持"/"等字符 分类名字:去空格处理 不得包含"&"符号 主图:一定要有主图列 不为空 ...

  5. [强连通分量] POJ 1236 Network of Schools

    Network of Schools Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 16803   Accepted: 66 ...

  6. <li>高度自适应

    使用ul和li代替表格进行排版的时候,会发现li无法自适应高度. 只需要将li的overflow置为auto就可以了,因为li默认的overflow是visible,会将内部元素显示在li之外.   ...

  7. jquery元素插入、删除、清空

    1)jquery元素插入 <!--位置1--> <div id='test'> <!--位置2--> <div>测试</div> <! ...

  8. 《Java中的自动装箱和拆箱功能.》

    //Java中的自动装箱和拆箱功能. class AutoboxingUnboxing { public static void main(String[] args) { //直接把一个基本类型变量 ...

  9. MySQL表类型和存储引擎版本不一致解决方法

    使用的是老版本的mysql客户端Navicate 8 ,mysql 服务端用的是mysql5.6的版本,在修改版本引擎的时候出现版本不对; mysql error ‘TYPE=MyISAM’ 解决办法 ...

  10. IIS 7.5 高并发参数配置

    IIS 7.5 高并发参数配置 由于之前使用的是默认配置,服务器最多只能处理5000个同时请求,对于高并发请求,参照文档设置10万并发 1. 调整IIS 7应用程序池队列长度 由原来的默认1000改为 ...