Angularjs之表单实例（三）
正确引用js css文件后可运行
<!DOCTYPE html>
<html ng-app='myApp'>
<head>
<title>Bootstrap navigator</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/angular.min.js"></script>
</head>
<body>
<!--========================
07表单
============================ -->
<!-- 1.简单表单 class="simple-form"
*1.函数的定义(d)和用法(m)
reset() 方法:(d)可把表单中的元素重置为它们的默认值。(m)formObject.reset() -->
=================================================
<h3>1.简单表单 class="simple-form"</h3>
=================================================
<div ng-controller="Controller">
<form novalidate class="simple-form"><!-- novalidate是用来屏蔽浏览器本身的验证功能 -->
Name: <input type="text" ng-model="user.NaMe" /><br />
E-mail: <input type="email" ng-model="user.EmAil" /><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>
=================================================
<h3>2.css表单 class="css-form"</h3>
=================================================
<!-- 2.css表单 class="css-form" -->
<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 />
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>
</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;
}
div[contentEditable] {/*对contentEditable属性样式的设定方法*/
cursor: pointer;
background-color: #D0D0D0;
}
button[ng-disabled] {/*对ng-disabled属性样式的设定方法*/
background-color: #FA787E;
} </style> =================================================
<h3>3.根据表单状态或者表单元素状态绑定 </h3>
<ol>
<li> 只有当表单发生改变时，重置按钮才会被显示出来。</li>
<li>只有当表单有改变并且改变的值都是合法的，保存按钮才会被显示出来。</li>
<li> 能自定义user.email和user.agree的错误信息。</li>
</ol>
=================================================
<!-- 3.根据表单状态或者表单元素状态绑定 -->
<div ng-controller="Controller">
<form name="form" class="css-form" novalidate>
Name:
<input type="text" ng-model="user.name" name="uName" required /><br />
E-mail:
<input type="email" ng-model="user.email" name="uEmail" required/><br /> <div ng-show="form.uEmail.$dirty && form.uEmail.$invalid">Invalid:
<!--此div，如果form表中的name为uEmail的input元素中的内容违法或者是脏数据，那么就显示出来-->
<span ng-show="form.uEmail.$error.required">Tell us your email.</span>
<!-- 如果错误信息是由required引起的，就显示此span--> <span ng-show="form.uEmail.$error.email">This is not a valid email.</span>
<!-- 如果错误信息是由里面的内容不合法引起的，就显示此span-->
</div> Gender: <input type="radio" ng-model="user.gender" value="male" />male
<input type="radio" ng-model="user.gender" value="female" />female<br /> <input type="checkbox" ng-model="user.agree" name="userAgree" required />
I agree: <input ng-show="user.agree" type="text" ng-model="user.agreeSign"
required /><br />
<div ng-show="!user.agree || !user.agreeSign">Please agree and sign.</div> <button ng-click="reset()" ng-disabled="isUnchanged(user)">RESET</button>
<button ng-click="update(user)"
ng-disabled="form.$invalid || isUnchanged(user)">SAVE</button>
</form>
</div>
=================================================
<h3>4.自定义验证 </h3>
<ol>
<li>模型到视图的更新中- 只要绑定的模型改变了，NgModelController#$formatters数组中的函数就会被轮流调用，所以每一个函数都有机会对数据进行格式化，当然你也可以通过NgModelController#$setValidity来改变表单的验证状态。</li>
<li>视图到模型的更新中- 相同的，只要用户与表单交互了，NgModelController#$setViewValue就会被调用。 这次是NgModelController#$parsers数组中的函数会被依次调用，每个函数都有机会来改变值或者通过NgModelController#$setValidity来改变表单的验证状态</li>
<li>第一个要验证的是输入是否是整数。例如，1.23就不是符合验证的值，因为它包含了分数部分。注意，我们是将验证数组中的项从头取出，而不是压入。这是因为我们要在输入值被改变（格式化）前，先验证输入的合法性</li>
<li>第二个指令是一个“智能浮点(smart-float)”。它能把"1.2"或者"1,2"都转化为合法的浮点数"1.2"。注意，这里我们不能使用“数字输入类型”，因为H支持TML5的浏览器不允许用户输入像"1,2"这样的非法值</li> </ol>
=================================================
<div ng-controller="Controller">
<form name="form" class="css-form" novalidate>
<div>
Size (integer 0 - 10):
<input type="number" ng-model="size" name="size"
min="0" max="10" integer />{{size}}<br /><!-- 自定义指令integer 和 smart-float -->
<span ng-show="form.size.$error.integer">This is not valid integer!</span>
<span ng-show="form.size.$error.min || form.size.$error.max">
The value must be in range 0 to 10!</span>
</div> <div>
Length (float):
<input type="text" ng-model="length" name="length" smart-float />
{{length}}<br />
<span ng-show="form.length.$error.float">
This is not a valid float number!</span>
</div>
</form>
</div> =================================================
<h3>5.自定义表单控件</h3>
<ol>
<li>实现render方法。这个方法负责在数据模型变化时，把变化的值传递给NgModelController#$formatters后，用来在view上渲染新的数据。</li>
<li>在用户与控件交互并且模型需要被更新时，调用$setViewValue方法。这通常是在DOM的监听事件中完成的。</li>
<li>如何添加一个“内容可编辑”的数据双向绑定的元素</li>
</ol>
================================================= <div contentEditable="true" ng-model="content" title="Click to edit">Some</div>
<pre>model = {{content}}</pre> <script>
var app = angular.module('myApp', []); /*表单内容的保存与重置 自定义函数：Reset（）、update（）、isUnchange() */
app.controller('Controller', function($scope) {
$scope.master= {};
$scope.update = function(user) {
$scope.master= angular.copy(user);
};
$scope.reset = function() {
$scope.user = angular.copy($scope.master);
};
$scope.isUnchanged = function(user) {
return angular.equals(user, $scope.master);
};
$scope.reset();
}); /*整数验证
1.函数的定义(d)和用法(m)
test()方法:(d)用于检测一个字符串是否匹配某个模式. (m)RegExpObject.test(string) 返回值为true 或 false; */
var INTEGER_REGEXP = /^\-?\d*$/;/*整数的正则表达式：或者以"-"（负）开头，或者没有负号，后面都是正整数，包括0*/
app.directive('integer', function() {
return {
require: 'ngModel',
link: function(scope, elm, attrs, ctrl) {
ctrl.$parsers.unshift(function(viewValue) {
if (INTEGER_REGEXP.test(viewValue)) {
/* it is valid*/
ctrl.$setValidity('integer', true);
return viewValue;
} else {
/* it is invalid, return undefined (no model update)*/
ctrl.$setValidity('integer', false);
return undefined;
}
});
}
};
});
/*浮点数验证*/
var FLOAT_REGEXP = /^\-?\d+((\.|\,)\d+)?$/;/*可以是正负，可以是整数，也可以是浮点数，浮点数可以用"."分开，也可以用","分开。*/ app.directive('smartFloat', function() {
return {
require: 'ngModel',
link: function(scope, elm, attrs, ctrl) {
ctrl.$parsers.unshift(function(viewValue) {
if (FLOAT_REGEXP.test(viewValue)) {
ctrl.$setValidity('float', true);
return parseFloat(viewValue.replace(',', '.'));
} else {
ctrl.$setValidity('float', false);
return undefined;
}
});
}
};
}); /*自定义表单控件*/
app.directive('contenteditable', function() {/*自定义指令：contenteditable*/
return {
require: 'ngModel',
link: function(scope, elm, attrs, ctrl) {
/*view -> model*/
elm.bind('blur', function() {/*给元素绑定blur事件*/
scope.$apply(function() {
ctrl.$setViewValue(elm.html());/*当输入结束后，焦点离开div元素时，就更新model*/
});
}); //model -> view
ctrl.$render = function(value) {
elm.html(value);/*更新视图view*/
}; /* load init value from DOM*/
ctrl.$setViewValue(elm.html());
}
};
});
</script> </body>
</html>
参考文章链接地址：http://www.linuxidc.com/Linux/2015-01/112574.htm http://angularjs.cn/A00t
Angularjs之表单实例（三）的更多相关文章
- AngularJS：表单
ylbtech-AngularJS:表单 1.返回顶部 1. AngularJS 表单 AngularJS 表单是输入控件的集合. HTML 控件 以下 HTML input 元素被称为 HTML 控 ...
- 【AngularJs】---表单验证
1. 必填项 验证某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: <input type="text" required /> 2 ...
- angularJS 过滤器 表单验证
过滤器1.filter的作用就是接收一个输入,通过某个规则进行处理,然后返回处理后的结果,主要用于数据的格式化.2.内置过滤器(1)Currency(货币)将一个数值格式化为货币格式,默认为$(2)D ...
- AngularJS实现表单手动验证和表单自动验证
AngularJS的表单验证大致有两种,一种是手动验证,一种是自动验证.一.手动验证 所谓手动验证是通过AngularJS表单的属性来验证.而成为AngularJS表单必须满足两个条件: 1.给for ...
- PHP 表单验证 - 完成表单实例
------------------------------------------------------------------------------------------- 本节展示如何在用 ...
- PHP 表单 - 5（完整表单实例）
PHP 完整表单实例 本章节将介绍如何让用户在点击"提交(submit)"按钮提交数据前保证所有字段正确输入. PHP - 在表单中确保输入值 在用户点击提交按钮后,为确保字段值是 ...
- 基于angularJS的表单验证练习
今天看了一下angularJS的表单验证,看的有点云里雾里(也有可能是雾霾吸多了),于是做了一个小练习来巩固一下. html: <div ng-controller="Aaa" ...
- HTML表单实例
HTML表单 表单用于搜集不同类型的用户输入,表单由不同类型的标签组成,实现一个特定功能的表单区域(比如:注册), 首先应该用<form>标签来定义表单区域整体,在此标签中再使用不同的表单 ...
- form表单提交三种方式，demo实例详解
第一种:使用type=submit 可以直接提交 <html> <head> <title>submit直接提交</title> </head& ...
随机推荐
- 返回键 隐藏、、收起键盘textView|textField
/** 隐藏 返回键 的做法,将title置为空 */ self.navigationItem.leftBarButtonItem = [[UIBarButtonItem alloc]initWith ...
- contentOffset,frame,bounds,contentSize,ContentInset
contentOffset, 在UIScrollview里面滚动条用的最多,比如网易新闻的滚动条,肯定会用到这个. 我认为:它是下一个要显示的图片的左上角.设置了这个左上角后,下一次滚动时,邮戳直接到 ...
- The include feature of SQL Server Index
1. Why we need the index 'include' feature? For SQLServer , the length of all the index key have a l ...
- rm 命令(转）
昨天学习了创建文件和目录的命令mkdir ,今天学习一下linux中删除文件和目录的命令: rm命令.rm是常用的命令,该命令的功能为删除一个目录中的一个或多个文件或目录,它也可以将某个目录及其下的所 ...
- Android SnapHelper
转载请注明出处:http://blog.csdn.net/crazy1235/article/details/53386286 SnapHelper 是 Android Support Library ...
- 分享一下怎么开发一款图片视频类App，秒拍和prisma
第一步,分解短视频App的功能 我们在秒拍官网看到如此描述: [视频拍摄及导入]支持直接拍摄及导入手机本地的视频 [照片电影]照片专属特效,轻松创作照片电影 [MV特效]10余款全新MV特效,让普通视 ...
- [地图代数]处理DEM中的高程异常值——ArcGIS栅格计算的应用
接了一个任务,要处理DEM原始数据中的高程异常值,如图中的异常亮点. 想了一下,以前处理过建筑物附近的DEM铲平,那么高程异常值应该如何处理呢? 显然直接铲平时不太合理的,需要利用异常值周围的高程进行 ...
- [GDAL]读取HDF格式的calipso数据
探测地球云层分布的CloudSat和CALIPSO卫星 http://www.nasa.gov/mission_pages/calipso/main/index.html http://www.nas ...
- dojo使用疑难杂症集锦
最近在用dojo做项目, 把使用过程中遇到的一些问题记录下来, 方便以后查阅, 因为问题不断, 所以持续更新中.......... 嵌套 TabContainer 时会出现样式问题: tab控制样式问 ...
- javascript设计模式学习之九——命令模式
一.命令模式使用场景及定义 命令模式常见的使用场景是:有时候需要向某些对象发送请求,但是并不知道请求的接受者是谁,也不知道请求的具体操作是什么.此时希望用一种松耦合的方式来设计程序,使得请求的发送者和 ...