<!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. 将FlashPlayerDebugger的trace()功能输出到日志

    1.XP:C:\Documents and Settings\{username} win7:C:\Users\{username} 在以上文件夹下生成mm.cfg文件,写入如下内容: ErrorRe ...

  2. $.getJSON( )的使用方法简介

    JSON(JavaScript Object Notation)即JavaScript对象表示法,是一种轻量级的数据交换格式.它非常便于编程人员对数据的处理,也便于机器对数据的解析和生成,应用非常广泛 ...

  3. python目前最好用的IDE——pycharm

    PyCharm是一种Python IDE,带有一整套可以帮助用户在使用Python语言开发时提高其效率的工具,比如调试.语法高亮.Project管理.代码跳转.智能提示.自动完成.单元测试.版本控制. ...

  4. MySQL 入门知识点

    参考网址:http://www.cnblogs.com/mr-wid/archive/2013/05/09/3068229.html 1.数值类数据列类型 数据列类型 存储空间 描述 TINYINT ...

  5. Jenkins快速上手

    一.Jenkins下载安装 1.到官网下载jenkins.war包:http://jenkins-ci.org/ 2.安装方法有两种: a) 把下载下来的jenkins.war包放到文件夹下,如C:\ ...

  6. Android 每次访问网络时，都需要判断是否有网络

    /** * 在执行网络操作之前判断网络是否链接可用 * * @return true 可用 false 不可用 */ private boolean isOnline() { Connectivity ...

  7. 例子：Background Agent Sample

    通过本例程学习: 后台代理Agent的使用方法 定期代理(PeriodicTask)来说,限制了: 有一些API不能使用,并不是说你不调用就可以了,只要你在同一个程序集里使用了这些API,就不会通过验 ...

  8. 2014年5月份第3周51Aspx源码发布详情

    HGM简单连连看游戏源码  2014-5-19 [VS2010]源码描述:这是一款基于WinForm窗体程序的简单水果连连看的小游戏.界面比较美观, 功能如下:该游戏可以显示当前关卡,还有剩余时间.重 ...

  9. 如何解决xx列不在表中

    在连接数据库的程序中常会出现xx列不在表中的问题?那么应该怎么解决呢? 产生此问题的原因有三种: 1.数据表没这个字段2.sql查询没将这个字段查出来3.字段名写错了 还有重要的是一定要检查你的数据库 ...

  10. windows核心编程---第六章 线程的调度

    每个线程都有一个CONTEXT结构,保存在线程内核对象中.大约每隔20ms windows就会查看所有当前存在的线程内核对象.并在可调度的线程内核对象中选择一个,将其保存在CONTEXT结构的值载入c ...