过滤器
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{}