过滤器
1.filter的作用就是接收一个输入，通过某个规则进行处理，然后返回处理后的结果，主要用于数据的格式化。
2.内置过滤器
(1)Currency(货币)
将一个数值格式化为货币格式，默认为$
(2)Date
(3)Filter子串匹配
用来处理一个数组，可以过滤出含有某个子串的元素，作为一个字数组来返回。通常用来过滤需要展示的元素。可以是字符串数字，对象或是一个用来从数组中选择元素的函数。
字符串：返回所有包含这个字符串的元素
对象：将待过滤对象的属性同这个对象中的同名属性进行对比，如果属性值是字符串就会判断是否包含该字符串。它接受一个参数，用来定义子串的匹配规则。若希望对全部属性都进行对比，可以将$作为键名。
函数：对每个元素都执行这个函数，返回非假值的元素会出现在新的数组中并返回。
示例：
$scope.func=function(e){return e.age>4;}
{{childrenArray|filter:'a'}} //匹配属性值中含有a的
{{childrenArray|filter:4}}
{{childrenArray|filter:{name:'i'}} //参数是对象，匹配name属性中含有i的
{{childrenArray|filter:func}} //参数是函数，指定返回age>4的
例：
<body ng-app="myapp">
<div ng-controller="ctrl01">
<h1>{{money | currency:'￥'}}</h1> //￥12,300.00
<h1>{{date|date:'yyyy年MM月dd日 HH:mm:ss'}}</h1> //2016年01月24日 13:11:03
<div ng-repeat="user in users |filter:'l'"> //这里相当于<div ng-repeat="user in (users |filter:'l')">，
对全文所有的属性进行过滤，看是否包含l，结果为lyy1-->123 lulu-->1234
{{user.name}}-->{{user.phone}}
</div>
</div>
</body>
angular.module("myapp",[])
.controller('ctrl01',function($scope){
$scope.money=12300;
$scope.date=new Date();
var users=[
{id:1,name:'lyy1',phone:'123'},
{id:2,name:'lulu',phone:'1234'},
{id:3,name:'hahaha',phone:'12345'},
];
$scope.users=users;
})
修改为：<input ng-model="condition" />
<div ng-repeat="user in users | filter:condition">
{{user.name}}-->{{user.phone}}
</div>
则可以根据输入的内容显示结果
若改为：<div ng-repeat="user in users |filter:{name:condition}">则在name属性中查找
(4)Json
JSON(JavaScript Object Notation)是一种轻量级的数据交换格式，采用完全独立于语言的文本格式，如：
<script type="javascript">
var json={'name':'lyy','age':'18'};
alert(json.name);
alert(json['name']);
</script>
在AngularJS中这样表示：{{{'name':'lyy','city':'NJ'}|json}}
结果为：{ "name": "lyy", "city": "NJ" }
可以将一个JSON或者JS对象转换成字符串，对调试很有帮助
(5)limitTo(限制个数)
根据传入的参数决定生成的新数组或字符串的长度，参数的正负号控制是从前面还是后面截取。
<h1>{{"fjierghihug"|limitTo:3}}</h1> 结果：fji
{{['a','b','c','d','e']|limitTo:2}} 结果：["a","b"]
(6)Lowercase
(7)Uppercase
{{"fjierghihug"|uppercase}}
(8)Number
将数字格式化为文本，第二个参数用来控制小数点的位数
{{12343245|number}} // 12,343,245
{{12.343245|number:2}} //12.34
(9)orderBy(排序)
(10)自定义filter
<h1>{{money | myFilter:'￥'}}</h1>
.filter("myFilter",function(){
return function(value,param){
return value+""+param;
}
})
结果：12300￥
这里的value相当于money的数值，param相当于￥
3.表单验证
虽然WEB应用安全不能完全依赖客户端验证，但客户端验证可以提供表单状态的实时反馈。
如果想要屏蔽浏览器对表单的默认验证行为，可以在表单元素上添加novalidate标记
(1)必填项required
<input type="text" required ng-minlength="5" />
(2)最小长度ng-minlength
(3)最大长度ng-maxlength
(4)模式匹配ng-pattern
<input type="text" ng-pattern="[a-zA-Z]" />
(5)电子邮件 type="email"
(6)数字 type="number"
(7)URL <input type="url" name="homepage" ng-model="user.facebook_url" />
(8)在表单中控制变量
a.未修改的表单：判断用户是否修改了表单，未修改则为true，修改了就为false
formName.inputFieldName.$pristine
b.修改过的表单：只要修改了表单，不管是否通过验证，都为true
formName.inputFieldName.$dirty
c.合法的表单：formName.inputFieldName.$valid
d.不合法的表单：formName.inputFieldName.$invalid
e.错误：formName.inputFieldName.$error
(9)一些有用的CSS样式
AngularJS处理表单时，会根据表单当前的状态添加一些CSS样式
.ng-pristine{} .ng-dirty{} .ng-valid{} .ng-invalid{}

angularJS 过滤器 表单验证的更多相关文章

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

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

  2. angularjs的表单验证

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

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

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

  4. AngularJS 的表单验证

    最近开始学习angularjs,学到表单验证的时候发现有必要学习下大神的好文章: 转:http://www.oschina.net/translate/angularjs-form-validatio ...

  5. AngularJS复习------表单验证

    在AngularJS中能够将HTML5表单验证功能同自己的验证指令结合起来使用,这里介绍使用的核心功能. 使用表单验证,首先要确保表单的每个控件都有name属性 如果想要屏蔽浏览器对表单的默认验证行为 ...

  6. AngularJs实现表单验证

    首先,我们应该知道,表单中,常用的验证操作有: $dirty 表单有填写记录 $valid 字段内容合法的 $invalid 字段内容是非法的 $pristine 表单没有填写记录 $error 表单 ...

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

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

  8. AngularJS form表单验证（非常全面)

    构建一个ng表单 novalidate=”novalidate” 2.form中不能有action属性.提交交由ng-submit处理 3.每个input一定要有ng-model,最好有一个name方 ...

  9. AngularJS的表单验证提交示例

    代码下载:https://files.cnblogs.com/files/xiandedanteng/angularjsFormSubmit.rar 前台代码: <%@ page content ...

随机推荐

  1. javascript基础学习（三）

    javascript之运算符 学习要点: 表达式 运算符:一元运算符,算术运算符,关系运算符,逻辑运算符,*位运算符,赋值运算符 一.表达式 表达式有常量表达式,变量表达式,复合表达式. 二.算术运算 ...

  2. Entity Framework 级联删除

    为一对主从表增加级联删除功能 protected override void OnModelCreating(DbModelBuilder modelBuilder) { modelBuilder.E ...

  3. dedecms织梦建站总结

    说好要每月坚持写博客的,差一点就背弃自己的诺言了. 这一个月,除了修改magento站点和学习android外,一心都投在了为一家建筑公司做网站上去了,使用的是dedecms,我主要做的是前端开发,着 ...

  4. MySql数据库1【概念】

    [mysql] mysql是目前最主流的跨平台.开放源代码的关系型数据库,由瑞曲的mysql ab公司开发,已经被SUN公司收购,标识是一只名为sakila的海豚,代表mysql的速度.能力.精确优秀 ...

  5. Java初试

    另外在Java语言的代码内部书写文件路径时,需要注意大小写,大小写需要保持一致,路径中的文件夹名称区分大小写.由于’\’是Java语言中的特殊字符,所以在代码内部书写文件路径时,例如代表“c:\tes ...

  6. python【第二篇】列表、元组、字典及文件操作

    本节内容 列表 元组操作 字符串操作 字典操作 集合操作 文件操作 字符编码与转码 1.列表 列表是我们最以后最常用的数据类型之一,通过列表可以对数据实现最方便的存储.修改等操作:列表有序.可变.元素 ...

  7. spoj 2319 BIGSEQ - Sequence

    You are given the sequence of all K-digit binary numbers: 0, 1,..., 2K-1. You need to fully partitio ...

  8. map和lambda

    同事问我python里,比如一个列表: a = ['1', '2', '3'] 如何变成: b = ['1x', '2x', '3x'] 好吧,果断不知道-原来pthon中有map函数,查看帮助文档: ...

  9. adb设备，根据serial获取vid pid

    使用adb devices命令,可以轻松获取到所有连接到PC的adb设备的serial值. 但是adb命令无法获取adb usb设备的vendor id和product id. 本程序根据adb协议, ...

  10. 转:基于ASP.NET的Comet长连接技术解析

    原文来自于: Comet技术原理 来自维基百科:Comet是一种用于web的技术,能使服务器能实时地将更新的信息传送到客户端,而无须客户端发出请求,目前有两种实现方式,长轮询和iframe流. 简单的 ...