<!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. Linux驱动设计—— 驱动调试技术

    参考博客与书籍: <Linux设备驱动开发详解> <Linux设备驱动程序> http://blog.chinaunix.net/uid-24219701-id-2884942 ...

  2. Android Studio 使用教程

    http://www.tuicool.com/articles/amMvM3B 用 Android Studio 开发安卓 APP-使用篇 http://ask.android-studio.org/ ...

  3. treap树及相关算法

    #include "stdafx.h" #include <stdio.h> #include <stdlib.h> #include <string ...

  4. Caffe-windows上训练自己的数据

    1.数据获取 在网上选择特定类别,下载相应的若干张图片.可以网页另存或者图片下载器.本例中保存了小狗.菊花.梅花三类各两百多张. 2.重命名 import os import os.path root ...

  5. PHP读某一个目录下所有文件和文件夹

    废话少说了 直接上代码 <?php function read_dir($dir) { if (!is_dir($dir)) { echo 'not a dir '; return; } if ...

  6. Python_Day_5装饰器、字符串格式化、序列化、内置模块、生成器、迭代器之篇

    一.装饰器 为什么要用装饰器??? 在实际的开发环境中应遵循开发封闭原则,虽然在这个原则是用的面向对象开发,但也适用于函数式编程,简单地说,它规定已经实现的功能代码不是允许修改的,但是可以被扩展: 封 ...

  7. 【转】div弹出窗口的制作

    来自:http://www.21shipin.com/html/95347.shtml 可以覆盖父窗口,可以移动的,做了关闭按钮 <html> <head> <scrip ...

  8. Linux 下 apache 日志分析与状态查看[转]

    假设apache日志格式为: 118.78.199.98 – - [09/Jan/2010:00:59:59 +0800] “GET /Public/Css/index.css HTTP/1.1″ 3 ...

  9. java 框架Nutz

    http://nutzam.com/ Nutz 可以做什么? Dao -- 针对 JDBC 的薄封装,事务模板,无缓存 Ioc -- JSON 风格的配置文件,声明时切片支持 Mvc -- 注解风格的 ...

  10. SQL Server 的SQL基础知识

    1.N'关闭'N是指nvarchar,是将其内容关闭作为 Unicode字符常量(双字节).而没有N的 '关闭', 是将关闭作为字符常量(单字节). 平常没有加N,结果里面直接出现?. 具体如下图: ...