<!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. URAL 2030 Awesome Backup System

    Awesome Backup System Time limit: 2.0 secondMemory limit: 64 MB It is known that all people can be d ...

  2. 带百分号的数据转json

    今天处理前后数据传输的时候遇到了问题. 前台拼参数是这样写的 '&rowData=' + JSON.stringify(rowData); 后台解析出的对象却总是null,而且没有抛Parse ...

  3. 黑马程序员——JAVA基础之set集合

    ------- android培训.java培训.期待与您交流! ---------- Set:       元素是无序(存入和取出的顺序不一定一致),元素不可以重复.    Set接口中常用的类: ...

  4. spring源码学习之：xml标签扩展配置例子

    在很多情况下,我们需要为系统提供可配置化支持,简单的做法可以直接基于Spring的标准Bean来配置,但配置较为复杂或者需要更多丰富控制的 时候,会显得非常笨拙.一般的做法会用原生态的方式去解析定义好 ...

  5. shell下的作业管理[转]

    作业管理 举例来说,我们在登陆 bash 后, 想要一边复制文件.一边进行数据搜寻.一边进行编译,还可以一边进行 vi 程序撰写! 当然我们可以重复登陆那六个文字介面的终端机环境中,不过,能不能在一个 ...

  6. Redis GEO ，GEOHASH，Spatial_index

    https://matt.sh/redis-geo http://antirez.com/latest/0 http://invece.org/ https://github.com/davidmot ...

  7. 怎么让OCR文字识别软件转换别的语言文档

    ABBYY PDF Transformer+让您可创建或转换希伯来语.意第绪语.日语.中文.泰语.韩语和阿拉伯语的文档.那么如何顺利使用这些复杂语言文字呢?小编教你两步骤轻松快速处理包含以下复杂语言文 ...

  8. ArrayList、linklist、list的区别

    List是一个接口,ArrayList和LinkedList是两个实现类,他们实现的方式不一样,其实LinkedList才是真正的链表(如果不清楚什么是链表,需要了解一下相关数据结构的知识,这不是一两 ...

  9. 虚拟化之vmware-vcenter

    VMware ESXi.VMware vCenter Server 和 vSphere Client,它们分别是 vSphere 的虚拟化层.管理层和接口层. vcenter server 插件和vc ...

  10. Netflix Zuul 了解

    Zuul 是提供动态路由,监控,弹性,安全等的边缘服务.Zuul 相当于是设备和 Netflix 流应用的 Web 网站后端所有请求的前门.Zuul 可以适当的对多个 Amazon Auto Scal ...