angular写的过滤器 怎么引入

 我来答
lilipat
高粉答主

2017-02-14 · 每个回答都超有意思的
知道大有可为答主
回答量:3万
采纳率:94%
帮助的人:4987万
展开全部
1.过滤器是用来格式化需要展示给用户的数据,AngularJS中含有实用的内置过滤器可以使用,也支持用户进行自定义过滤器;
2.过滤器调用方式:
(1) 在HTML的模板中绑定符合{{}} 内通过 | 符号来调用过滤器; 比如{{ name | uppercase }} ------将name字符串中的每个字符转为大写字母;
(2) 在JavaScript中可以通过$filter 来调用过滤器,比如:

[javascript] view plain copy
app.controller("demoController",['$scope','$filter',function($scope,$filter){
$scope.name = $filter("uppercase")('ari');
}]);
(3) 在HTML中使用过滤器时,如需要传递参数给过滤器,则需要在过滤器后面加冒号即可,若有多个参数,则在每个参数后面加入冒号即可,比如 {{ 123.4567 | number : 2}} 页面展示为 123.46
3.angularJS 提供的内置过滤器:
(1) currency: 可以将一个数值格式化为货币格式,默认的货币符号是当前客户端所处区域的货币符号;
(2)date:将日期格式化为需要的格式,具体的格式参考其API;
(3) filter:从给定数组中选择一个子集,并将其生成一个新数组返回。filter过滤器的第一个参数可以是字符串、对象或是一个用来从数组中选择元素函数,传入不同类型时表现:
1) 字符串:返回所有包含这个字符串的元素,如想返回不包含该字符串的所有元素,则在参数之前加 ! ;
2) 对象:AngularJS会将待过滤对象的属性同这个对象中的同名属性进行比较,若属性值是字符串就会判断是否包含该字符串;若希望对全部属性进行对比,将$作为键名;

3) 函数: 对待过滤数组的每个元素执行此函数,返回非假值的元素会出现在新的数组中并返回;
filter的第二个参数可以是:
1)true: 用angular.equals(excepted,actual)对两个值进行严格比较;
2) false:进行区分大小写的子字符串比较;
3)函数:运行这个函数,如果返回真值就接受这个元素;
(4) json:将一个JSON或JavaScript对象转换成字符串;
(5) limitTo :根据传入的参数生成一个新的数组或字符串,新的数组或字符串的长度取决于传入的参数,通过传入参数的正负值来控制从前面还是后面进行截取;
如果传入的长度大于被过滤的数组或字符串的长度,则整个数组或字符串都会被返回;
{{ San is very people | limitTo : 3}} ----> San {{ San is very people | limitTo : -3}} ---->ple
(6)lowercase 将过滤字符串转为小写字母; uppercase 将过滤字符串转为大写字母;
(7) number :将数字格式化成文本,第二个参数是可选,用于控制小数点后截取的位数; 如果传入的是非数字字符,则返回空字符串;
(8) orderBy:用表达式对指定的数组进行排序,可以接受两个参数,第一个参数是必须的,第二个参数是可选,第一个参数的情况:
1) 函数:当第一个参数是函数时,该函数会被当作待排序对象的getter方法;
2)字符串:对这个字符串进行解析的结果将决定数组元素的排序方式,可以使用+ 或 - 来强制进行升序和降序;
3)数组:在排序表达式中使用数组元素作为谓词; 第二个参数用来控制排序的方向;
4.自定义过滤器:
此过滤器用来定义一个名为myFilter的过滤器,作用是将传入的字符串的首字母转为大写字母;

[javascript] view plain copy
angular.module("testFilter",[]).filter("myFilter",function(){
return function(input) {
if (input) {
return input[0].toUpperCase() + input.slice(1);
}
}
});
5.表单验证:

(1) 若想要屏蔽浏览器对表单的默认验证行为,则在表单元素上添加 novalidate标记,若想使用angularJS 的表单验证功能,需要保证form有name属性;
(2) input上可以使用的验证选项:
1)required:验证当前input是否有值,必填项;
2) ng-minlength/ng-maxlength:当前input能输入的最大长度和最小长度; <input name="text" ng-minlength="2" ng-maxlength="20"/>
3) ng-pattern :模式匹配,用来确保输入能够匹配指定的正则表达式;
4) email:验证输入的内容是否是电子邮件,<input type="email" name="email"/>
5) number:验证输入的内容是否是数字 <input type="number" name="age"/>
6) URL:验证输入的内容是否是URL <input type="url" name="homespace"/>
在javaScript中可以使用这些属性去对表单做出实时响应 通过formName.inputFieldName.property格式访问属性:
1) formName.inputFieldName.$pristine:用来判断用户是否修改了表单,若未修改则返回true,若修改过,则返回false;
2) formName.inputFieldName.$dirty:只用用户修改过表单,无论输入是否通过验证,该值都返回true;
3) fornName.inputFieldName.$valid:用来判断表单的内容是否合法,若表单内容是合法的则返回true;
4) fornName.inputFieldName.$invalid:用来判断表单的内容是否不合法,若表单内容是不合法的则返回true;
5) fornName.inputFieldName.$error:用来判断表单所有的验证内容以及内容是否合法,如果验证失败,则属性值为true,若输入字段的值通过验证则返回false;

(3) $parsers:
当用户同控制器进行交互并且ngModelController中的$setViewValue()方法被调用时,$parsers数组中的函数会以流水线的形式被逐个调用,第一个调用值会变传入到第二个$parse中;调用函数时,可以使用$setValidity()函数去设置表单的合法性;
(4) $formatters:
当绑定的ngModel值发生变化,并经过$parsers数组中解析器处理后,这个值会被创递给$formatters流水线,此函数可以修改并格式化这些值;

(3) ngMessages( 在AngularJS 1.3+以上版本中才包含此指令)
1)ngMessages是angularJs的一个独立模块,故需要手动加载 指令为 $ bower install --save angular-messages或在angular官网上下载此文件,然后通过html引入;
2)ngMessages还需要作为引用程序的依赖模块引入,比如angular.module("myApp",[ngMessages]);
Storm代理
2023-08-29 广告
"StormProxies是全球大数据IP资源服务商,其住宅代理网络由真实的家庭住宅IP组成,可为企业或个人提供满足各种场景的代理产品。点击免费测试(注册即送1G流量)StormProxies有哪些优势?1、IP+端口提取形式,不限带宽,I... 点击进入详情页
本回答由Storm代理提供
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式