<!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. hdu1003 dp（最大子段和）

    题意:给出一列数,求其中的最大子段和以及该子段的开头和结尾位置. 因为刚学过DP没几天,所以还会这题,我开了一个 dp[100002][2],其中 dp[i][0] 记录以 i 为结尾的最大子段的和, ...

  2. 论文笔记之：Heterogeneous Image Features Integration via Multi-Modal Semi-Supervised Learning Model

    Heterogeneous Image Features Integration via Multi-Modal Semi-Supervised Learning Model ICCV 2013 本文 ...

  3. IOCP 浅析

    http://www.ibm.com/developerworks/cn/java/j-lo-iocp/ https://msdn.microsoft.com/en-us/library/window ...

  4. docker学习3-虚拟网络模式

    一.虚拟机网络模式 在理解docker网络隔离前,先看下之前虚拟机里对网络的处理,VirtualBox中有4中网络连接方式: NAT Bridged Adapter Internal Host-onl ...

  5. CSS设计模式之三权分立模式篇

    分类: Html/CSS | 转载请注明: 出自 海玉的博客 本文地址: http://www.hicss.net/separation-of-powers-model-in-css-design-p ...

  6. linux安全

    http://drops.wooyun.org/ 最专业的安全知识分享平台 http://www.freebuf.com/ 关注黑客与极客 http://book.beifabook.com/prod ...

  7. Python报错UnicodeDecodeError: 'ascii' codec can't decode byte 0xe0 in position 0: ordinal not in range(128)

    解决办法: 在报错的页面添加代码: import sys reload(sys) sys.setdefaultencoding('utf8')

  8. python3倒叙字符串

    google测试工程师的一道题: 设计一个函数,使用任意语言,完成以下功能: 一个句子,将句子中的单词全部倒排过来,但单词的字母顺序不变.比如,This is a real world,输出结果为 w ...

  9. windows 2003 server 远程桌面禁用本地资源，磁盘驱动器，串行口，复制文件

    首先进入组策略编辑器(开始-运行-gpedit.msc) 不要让用户在远端桌面和本地直接拷贝文件在远端桌面上进入它的组策略编辑器在 计算机配置->管理模板->Windows组件->终 ...

  10. eclipse中java文件报错:The type java.lang.Object cannot be resolved. It is indirectly referenced from required .class files

    问题:The type java.lang.Object cannot be resolved. It is indirectly referenced from required .class fi ...