<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            .my-form{

                transition: all linear 0.5s;

                background: transparent;

            }

            .my-form.ng-invalid{

                background-color: red;

            }

        </style>

    </head>

    <body ng-app="app">

        <form name="myForm"  class="my-form">

            userType: <input type="text" name="input" ng-model="userType" required="required"/><br />

            <span class="error" ng-show="myForm.input.$error.required">Required!</span><br />

            <code>userType:{{userType}}</code><br />

            <code>$valid:{{myForm.input.$valid}}</code><br />

            <code>$error:{{myForm.input.$error}}</code><br />

            <code>myForm.$valid: {{myForm.$valid}}</code><br />

            <code>myForm.$error.required:{{myForm.$error.required}}</code>

        </form>

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

        <script type="text/javascript">

            angular.element(document.getElementsByTagName('head')).append(angular.element('<base href="'+window.location.pathname+'"/>'));

        </script>

        <script type="text/javascript">

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

                /*app.controller('formController' , ['$scope' , function($scope){

                    $scope.userType = 'gest';

                }])*/

        </script>

    </body>

</html>

angular.js form的更多相关文章

  1. 使用angular.js获取form表单中的信息

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

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

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

  3. Angular JS 学习之Bootstrap

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

  4. Angular.js表单以及与Bootatrap的使用

    首先从angular.js的目录开始,如下图,知道了我们要学什么,然后再开始有目的的学习与对比. 1.从表达式开始: ng-app指令初始化一个 AngularJS 应用程序. ng-init指令初始 ...

  5. Angular.js 学习笔记

    AngularJS 通过新的属性和表达式扩展了 HTML. AngularJS 可以构建一个单一页面应用程序. <!-- ng-app 指令定义一个 AngularJS 应用程序. ng-mod ...

  6. activiti自定义流程之整合（二）：使用angular js整合ueditor创建表单

    注:整体环境搭建:activiti自定义流程之整合(一):整体环境配置 基础环境搭建完毕,接下来就该正式着手代码编写了,在说代码之前,我觉得有必要先说明一下activit自定义流程的操作. 抛开自定义 ...

  7. angular js 表单验证

    <!doctype html> <html ng-app="myapp"> <head> <meta charset="UTF- ...

  8. socket.io+angular.js+express.js做个聊天应用(四)

    接着上一篇 使用angularjs构建聊天室的client <!doctype html> <html ng-app="justChatting"> < ...

  9. {{angular.js 使用技巧}} - 基于验证框架的扩展（w5cValidator）

    开场白: angular.js 是谷歌出的前端js MV*框架,我也是今年做 worktile 的时候才开始接触的,起初技术选型的时候还准备使用 backbone(毕竟很多大公司在使用他,而且也是比较 ...

随机推荐

  1. typedef 和 define的区别

    类型取别名,还可以定义常量.变量.编译开关 都知道两个在某些情况下是相同的 但是define是在预编译时就会处理掉,进行简单的宏替换,不管正不正确都替换掉,末尾没有分号,有分号连分号也一起替换了. 而 ...

  2. lightoj1074 最短路

    题意:有n个城市,每个城市有拥挤值,有一些单向道路,从某个城市到另一个城市的花费是拥挤值差的三次方,当然可能是负的值.问从1点到某点最少的花费,若小于3或不能到达输出“?” 建图的边权是拥挤值差的三次 ...

  3. Linux启动新进程的三种方法

    程序中,我们有时需要启动一个新的进程,来完成其他的工作.下面介绍了三种实现方法,以及这三种方法之间的区别. 1.system函数-调用shell进程,开启新进程system函数,是通过启动shell进 ...

  4. C++ typedef详解

    1.typedef的用途1)定义一种类型的别名注意typedef并不是简单的宏替换,如下例所示: int main() { char *pa,pb;//声明了一个指向字符变量的指针pa,和一个字符变量 ...

  5. EDIUS工程里面的素材保存方法

    在实际使用EDIUS剪辑一段视频时,会有好多人问这样一个问题:EDIUS工程里面使用的素材不能自动复制到工程文件夹里面吗,难道要自己一个一个复制进去?面对这样的疑问,来看看小编是如何做的吧. 为了用户 ...

  6. jQuery的图像裁剪插件Jcrop

    1.最基本使用方法     html代码部分: <img src="demo_files/flowers.gif" id="demoImage"/> ...

  7. HTML5之Canvas绘图实例——曲线图

    实现正弦.余弦和正切函数画图(如下图):调试环境:Firefox

  8. JavaScript中知而不全的this （转）

    原文引自:http://www.cnblogs.com/snandy/p/4773184.html 都说 JavaScript 是一种很灵活的语言,这其实也可以说它是一个混乱的语言.它把函数式编程和面 ...

  9. Innodb IO优化 — 数据库表设计 转

    数据库表设计这块学问比较多,我这里单从互联网角度出发同时结合Innodb的特性给出一些设计方法供大家参考.本文构建大概分两分部分:Innodb的特性及设计中如何利用这种特性. Innodb特性: In ...

  10. C# 爬虫批量下载文件

    public static void DownFile(string url, string path, string fileName) { HttpWebRequest request = (Ht ...