<!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. linux下使用shell查看apache IP访问量

    1.查看TCP连接状态 netstat -nat |awk '{print $6}'|sort|uniq -c|sort -rn netstat -n | awk '/^tcp/ {++S[$NF]} ...

  2. Grunt完成对LESS实时编译

    安装 安装grunt需要先安装node.js. 之后需要借助npm来安装grunt-cli,在cmd中npm install -g grunt-cli.(测试grunt --version看是否正确显 ...

  3. jquery ajax跨域请求webservice webconfig配置

    <configuration> <system.web> <compilation debug="true" targetFramework=&quo ...

  4. stanford Protege 4.3 ERROR: Bundle org.protege.common 解决方法

    我的java版本是jdk1.8.0_45,安装了protege后打开总显示: ERROR: Bundle org.protege.common [1] Error starting file:/hom ...

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

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

  6. ie 11 cookie 的值为空

    昨天碰到ie 11上运行的程序时  登录老是登录不上去 一直是登录界面 最后检查半天发现时因为 权限验证登录时 获取cookie里的用户信息时 一直为空 便在网上查询资料  发现是因为ie11 里貌似 ...

  7. C# .net windows服务启动多个服务 ServiceBase

    在windows服务中想要启动多个服务 ServiceBase[] ServicesToRun; ServicesToRun = new ServiceBase[] { // new SyncServ ...

  8. RSA非对称加密

    先上RSA加密算法的一些简介(截图自轩辕老师的课件): 嗯--RSA就是这么一回事,于是有了如下题目: 1.In an RSA system, the public key of a given us ...

  9. ios学习之UISwipeGestureRecognizer手势识别

    ios学习之UISwipeGestureRecognizer手势识别   本文部分转自俺是一个瓜娃!!!的博客UISwipeGestureRecognizer ---手指动作,转载过来仅是为了自己查询 ...

  10. Win10/UWP新特性系列-GetPublisherCacheFolder

    微软Windows Runtime App拥有很强的安全模型来防止不同App之间的数据获取和共享,也就是我们所说的"沙盒机制",每个App都运行在Windows沙盒中,App之间的 ...