<!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. C#之延迟加载

    延迟加载,亦称延迟实例化,延迟初始化等,主要表达的思想是,把对象的创建将会延迟到使用时创建,而不是在对象实例化时创建对象,即用时才加载.这种方式有助于提高于应用程序的性能,避免浪费计算,节省内存的使用 ...

  2. fifo read

    #include <stdio.h> #include <stdlib.h> #include <string.h> #include <sys/types. ...

  3. BaiduMap Search List

    using AnfleCrawler.Common; using HtmlClient; using System; using System.Collections.Generic; using S ...

  4. 在eclipse中安装配置WebDriver

    安装好eclipse环境后,下载Selenium jar包 在eclipse中新建一个java project 之后选择新建的工程,将Selenium jar包中的lib文件夹和selenium-ja ...

  5. OC 解决NSArray、NSDictionary直接打印中文出现乱码的问题

    在iOS开发中,经常需要查看数组中得元素是否是自己想要的,但是苹果并没有对直接打印数组中得中文作处理,直接打印就会出现一堆很讨厌的东西,解决其实很简单,就是需要通过为NSArray添加分类,重写 - ...

  6. svg DOM的一些js操作

    这是第一个实例,其中讲了如何新建svg,添加元素,保存svg document,查看svg. 下面将附上常用一些元素的添加方法:(为js的,但基本上跟java中操作一样,就是类名有点细微差别) Cir ...

  7. addslashes() 函数和stripslashes()函数

    addslashes() 函数 定义和用法 addslashes() 函数在指定的预定义字符前添加反斜杠. 这些预定义字符是: 单引号 (') 双引号 (") 反斜杠 (\) NULL 语法 ...

  8. 无锁队列以及ABA问题

    队列是我们非常常用的数据结构,用来提供数据的写入和读取功能,而且通常在不同线程之间作为数据通信的桥梁.不过在将无锁队列的算法之前,需要先了解一下CAS(compare and swap)的原理.由于多 ...

  9. PAT (Basic Level) Practise：1022. D进制的A+B

    [题目连接] 输入两个非负10进制整数A和B(<=230-1),输出A+B的D (1 < D <= 10)进制数. 输入格式: 输入在一行中依次给出3个整数A.B和D. 输出格式: ...

  10. 【转载】WebDriver常用的鼠标/键盘操作

    注:driver为一个WebDriver的实例,xpath为一个元素的xpath字符串,在本文中一律采用xpath的方式定位元素 1.鼠标右键点击操作:Actions action = new Act ...