【AngularJS】—— 5 表单
这部分，我们写一个表单程序，使用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 表单的更多相关文章
- 【AngularJs】---表单验证
1. 必填项 验证某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: <input type="text" required /> 2 ...
- angularJS 过滤器 表单验证
过滤器1.filter的作用就是接收一个输入,通过某个规则进行处理,然后返回处理后的结果,主要用于数据的格式化.2.内置过滤器(1)Currency(货币)将一个数值格式化为货币格式,默认为$(2)D ...
- AngularJS实现表单手动验证和表单自动验证
AngularJS的表单验证大致有两种,一种是手动验证,一种是自动验证.一.手动验证 所谓手动验证是通过AngularJS表单的属性来验证.而成为AngularJS表单必须满足两个条件: 1.给for ...
- 基于angularJS的表单验证练习
今天看了一下angularJS的表单验证,看的有点云里雾里(也有可能是雾霾吸多了),于是做了一个小练习来巩固一下. html: <div ng-controller="Aaa" ...
- AngularJS 模块& 表单
模块定义了一个应用程序. 模块是应用程序中不同部分的容器. 模块是应用控制器的容器. 控制器通常属于一个模块. 应用("myApp") 带有控制器 ("myCtrl&qu ...
- angularjs的表单验证
angularjs内置了常用的表单验证指令,比如min,require等.下面是演示: <!DOCTYPE html> <html> <head> <meta ...
- 走进AngularJs(九)表单及表单验证
年底了越来越懒散,AngularJs的学习落了一段时间,博客最近也没更新.惭愧~前段时间有试了一下用yeoman构建Angular项目,感觉学的差不多了想做个项目练练手,谁知遇到了一系列问题.yeom ...
- 夺命雷公狗—angularjs—3—表单验证的高级用法
其实我们的angularjs都是是块状代码,其实是可以在实际开发中保存下来以后就可以达到重复利用的目的了.. 废话不多说,直接上代码: <!doctype html> <html l ...
- Angularjs之表单实例（三）
正确引用js css文件后可运行 <!DOCTYPE html> <html ng-app='myApp'> <head> <title>Bootstr ...
- AngularJS(9)-表单
AngularJS 表单是输入控件的集合 <!DOCTYPE html> <html lang="en"> <head> <meta ch ...
随机推荐
- Jenkins与Hudson的关系
Jenkins的前身是Hudson(Sun开发),2010年从Hudson分支出来. 由于Sun被Oracle收购,Oracle拥有Hudson的商标所有权.分支出来的Jenkins将继续走open ...
- 加州大学伯克利分校Stat2.3x Inference 统计推断学习笔记: FINAL
Stat2.3x Inference(统计推断)课程由加州大学伯克利分校(University of California, Berkeley)于2014年在edX平台讲授. PDF笔记下载(Acad ...
- linux 基础 shell脚本命令
#########shell脚本命令#### 1.diff diff file file1 ####比较两个文件的不同 -c ####显示周围的行 -u ####按照一格式统一输出生成补丁 -r ## ...
- SaltStack与ZeroMQ（二）
SaltStack与ZeroMQ SaltStack底层是基于ZeroMQ进行高效的网络通信. ZeroMQ简介 ØMQ (也拼写作ZeroMQ,0MQ或ZMQ)是一个为可伸缩的分布式或并发应用程序设 ...
- java中"与"和"或"
在java中"与"和"或"都具有短路功能. 关于"或"运算如 if(mc == null || mc.getReceive()==0){ / ...
- wpf 窗体内容旋转效果 网摘
<Window x:Class="simplewpf.chuangtixuanzzhuan" xmlns="http://schemas.micros ...
- C#获取C++中修改过的float数组(指针)，dll
C++中 struct rankPoint{ float sim; }; ]){ ; i < ; i++) prank[i].sim = ; ; i < ; i++) prank[i].s ...
- Distinct
SELECT 指令让我们能够读取表格中一个或数个栏位的所有资料.这将把所有的资料都抓出,无论资料值有无重复.在资料处理中,我们会经常碰到需要找出表格内的不同资料值的情况.换句话说,我们需要知道这个表格 ...
- ecshop默认配置
手机端 1.C, 系统默认所有配置 输出:print_r(C())
- swiper 增加同页面增加2个滚动
js代码 <script type="text/javascript"> var mySwiper = new Swiper('.slide_a',{ noSwipin ...