这部分，我们写一个表单程序，使用angularjs的检测并完成表单属性的获取与拷贝。

　　在AngularJS中，也支持html5中多种控件的自动检测，如：text、number、url、email、radio、checkbox等等。

　　可以通过anuglar.copy()自动拷贝form表单的数据。

　　代码参考如下：

<!doctype html>

<html ng-app>

    <head>

         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

         <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>

    </head>

    <body>

        <div ng-controller="controller">

            <form novalidate class="css-form">

                Name: <input type="text" ng-model="user.name" required /><br>

                E-mail: <input type="email" ng-model="user.email" required /><br>

                Age: <input type="number" ng-model="user.age" min="1" max="99" required /><br>

                Gender: <input type="radio" ng-model="user.gender" value="male"/>male

                    <input type="radio" ng-model="user.gender" value="female" />female<br>

                <button ng-click="reset()">reset</button>

                <button ng-click="update(user)">save</button>

            </form>

            <pre>form = {{user | json}}</pre>

            <pre>master = {{master | json}}</pre>

        </div>

        <style type="text/css">

            .css-form input.ng-invalid.ng-dirty {

                background-color: #FA787E;

            }

            .css-form input.ng-valid.ng-dirty {

                background-color: #78FA89;

            }

        </style>

        <script type="text/javascript">

            function controller($scope){

                $scope.master = {};

                $scope.update = function(user){

                    $scope.master = angular.copy(user);

                };

                $scope.reset = function(){

                    $scope.user = angular.copy($scope.master);

                };

                $scope.reset();

            }

        </script>

    </body>

</html>

　　当表单数据填写正确时，背景现实绿色，当数据非法时，则现实红色。

　　使用save则把form中的数据保存到master中，使用reset就把master中的数据拷贝到form中。

　　运行结果参考：

　　

【AngularJS】—— 5 表单的更多相关文章

  1. 【AngularJs】---表单验证

    1. 必填项 验证某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: <input type="text" required /> 2 ...

  2. angularJS 过滤器 表单验证

    过滤器1.filter的作用就是接收一个输入,通过某个规则进行处理,然后返回处理后的结果,主要用于数据的格式化.2.内置过滤器(1)Currency(货币)将一个数值格式化为货币格式,默认为$(2)D ...

  3. AngularJS实现表单手动验证和表单自动验证

    AngularJS的表单验证大致有两种,一种是手动验证,一种是自动验证.一.手动验证 所谓手动验证是通过AngularJS表单的属性来验证.而成为AngularJS表单必须满足两个条件: 1.给for ...

  4. 基于angularJS的表单验证练习

    今天看了一下angularJS的表单验证,看的有点云里雾里(也有可能是雾霾吸多了),于是做了一个小练习来巩固一下. html: <div ng-controller="Aaa" ...

  5. AngularJS 模块& 表单

    模块定义了一个应用程序. 模块是应用程序中不同部分的容器. 模块是应用控制器的容器. 控制器通常属于一个模块. 应用("myApp") 带有控制器 ("myCtrl&qu ...

  6. angularjs的表单验证

    angularjs内置了常用的表单验证指令,比如min,require等.下面是演示: <!DOCTYPE html> <html> <head> <meta ...

  7. 走进AngularJs(九)表单及表单验证

    年底了越来越懒散,AngularJs的学习落了一段时间,博客最近也没更新.惭愧~前段时间有试了一下用yeoman构建Angular项目,感觉学的差不多了想做个项目练练手,谁知遇到了一系列问题.yeom ...

  8. 夺命雷公狗—angularjs—3—表单验证的高级用法

    其实我们的angularjs都是是块状代码,其实是可以在实际开发中保存下来以后就可以达到重复利用的目的了.. 废话不多说,直接上代码: <!doctype html> <html l ...

  9. Angularjs之表单实例（三）

    正确引用js css文件后可运行 <!DOCTYPE html> <html ng-app='myApp'> <head> <title>Bootstr ...

  10. AngularJS(9)-表单

    AngularJS 表单是输入控件的集合 <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

随机推荐

  1. 洛谷P3398 仓鼠找sugar

    题目描述 小仓鼠的和他的基(mei)友(zi)sugar住在地下洞穴中,每个节点的编号为1~n.地下洞穴是一个树形结构.这一天小仓鼠打算从从他的卧室(a)到餐厅(b),而他的基友同时要从他的卧室(c) ...

  2. python——代码编码格式转换

    最近刚换工作不久,没太多的时间去整理工作中的东西,大部分时间都在用来熟悉新公司的业务,熟悉他们的代码框架了,最主要的是还有很多新东西要学,我之前主要是做php后台开发的,来这边之后还要把我半路出家的前 ...

  3. python面相对象进阶

    1. 类的成员 python 类的成员有三种:字段.方法.属性 字段 字段包括:普通字段和静态字段,他们在定义和使用中有所区别,而最本质的区别是内存中保存的位置不同, 普通字段 属于对象,只有对象创建 ...

  4. 帝国cms实现会员注册之后根据所在会员组转向的方法

    帝国cms要实现会员注册之后根据所在会员组转向的能能,就需要修改/e/member/class/member_registerfun.php文件找到第175行,修改成如下代码: //审核 if($ch ...

  5. 企业应用系统设计分享PPT

    因今天上午需要为团队做一个分享,所以昨晚连夜写了一个<企业应用系统设计>的PPT,因为时间比较短,写的比较急.现在把PPT贴出来,做一个记录.同时也希望对大家有用. 文件我上传到了百度网盘 ...

  6. Untiy3D - 窗口界面2

    Component 组件 Mesh:网格 Mesh Filter: 网格滤镜 Mesh Renderer 网格渲染器 Mesh Collider: 网格碰撞器.网格碰撞节点 Convex: 凸的.凸面 ...

  7. 从Paxos到ZooKeeper-三、ZooKeeper的典型应用场景

    ZooKeeper是一个典型的发布/订阅模式的分布式数据管理与协调框架,开发人员可以使用它来进行分布式数据的发布与订阅.另一方面,通过对ZooKeeper中丰富的数据节点类型进行交叉使用,配合Watc ...

  8. java校验时间格式 HH:MM

    package com; import java.text.SimpleDateFormat; import java.util.Date; /** * @author Gerrard */ publ ...

  9. ASP------如何读取文件内容

    <body> @{ var dataFile = Server.MapPath("~/App_Data/Persons.txt"); Array list = File ...

  10. 《零成本实现Web性能测试:基于Apache JMeter》读书笔记

    1.性能测试概念 性能测试目的: 评估系统能力,验证系统是否符合预期性能指标 识别系统中的弱点 系统调优,改进系统性能 检测长时间运行可能发生的问题,揭示隐含问题 验证稳定性.可靠性 常见性能指标 B ...