<!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. Android开发--ScrollView的应用

    1.简介 当内容无法全部显示时,需要采取滚动的方式获取其与内容.其中,ScrollView为垂直滚动控件,HorizontalScrollView为水平滚动控件. 2.构建

  2. hdu 1005 1021 递归超限 找规律 // 只要看题中n较大都是有规律的

    因为n>1000000000所以用递归 数组超限, 由递归函数f(n)=(A*f(n-1)+B*f(n-2))%7; 因为是除7的余数 因次一共有7*7=49种情况, 以后的值都和之前的对应相等 ...

  3. Windows Store App 过渡动画

    Windows Store App 过渡动画     在开发Windows应用商店应用程序时,如果希望界面元素进入或者离开屏幕时显得自然和流畅,可以为其添加过渡动画.过渡动画能够及时地提示用户屏幕所发 ...

  4. Sharepoint2012 Report权限

    在主文件夹下,点击“文件夹设置”,如下图: 在打开的界面中,点击“新建角色分配”,如下图: 在打开的界面中,录入window组名,或是AD域账号,选择以下的角色,点击确定即可.

  5. Hadoop 2.2.0学习笔记20131209

    1.下载java 7并安装 [root@server- ~]# rpm -ivh jdk-7u40-linux-x64.rpm Preparing... ####################### ...

  6. MySQL数据库忘记root密码解决办法

    MySQL数据库忘记root密码解决办法 1.在运行输入services.msc打开服务窗体,找到MYSQL服务.右键停止将其关闭.如图:

  7. 2、android Service 详细用法

    定义一个服务 在项目中定义一个服务,新建一个ServiceTest项目,然后在这个项目中新增一个名为MyService的类,并让它继承自Service,完成后的代码如下所示: ? 1 2 3 4 5 ...

  8. Excel Access 新建空白文档/打开已有文档 提示内存或磁盘空间不足的解决方法--验证

    服务器上发现,打开mdb数据库,点知道只有个空白的截面,打开已有的excel文件,一样,但多了个提示:内存磁盘空间不足或者关闭不再使用的工作表或者程序.检查过,内存和磁盘很充裕啊.那里不足啊,任务管理 ...

  9. python import其他文件夹下的模块

    模块的路径不在默认搜索路径中,需要在sys.path中添加 import syssys.path.append('需要模块的文件夹路径')

  10. Genymotion--最快的安卓模拟器 测试与模拟APP应用必备

    命令行工具,Eclipse插件,多操作系统 1 易于安装,易于运行 超过10个虚拟设备 您很匆忙?您想测试市场的主要设备?使用我们的虚拟设备! 2 控制功能强大的传感器来测试您的应用程序 自定义你的测 ...