angularJS自定义一个过滤器
2024-09-24 13:27:20
ng允许我们自定义指令
下面来我们自己来定义一个过滤指令:filter,返回一个函数的形式
filter(name,callback(){//name:过滤器的名字,callback:匿名函数 return function(collection,keynames){//collection:该指令前面的对象,keynames:用于过滤的关键字 /........................./ } })
1.金典的例子
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<script src="angular.js"></script>
</head>
<body ng-controller="myCtrl">
<div ng-repeat="item in array_object | unique:'name'">
{{item}}
</div>
</body>
</html>
<script>
angular.module("myApp",[])
.controller("myCtrl",["$scope",function(s){
s.array_object=[{"name":"明哥哥"},{"name":"小林黛玉"},{"name":"大哥大"},{"name":"小林黛玉"}];
s.Two_Fish="fdsdf";
s.change=function(){
console.log(s.Two_Fish); }
}])
.filter("unique",function(){
return function(collection,keynames){//collection->array_object、keynames->name,分别对应过滤器两边的条件
var output=[];//存储,过滤之后的对象
var keys=[];//用于对比过滤
angular.forEach(collection,function(item){
var key=item[keynames];
if(keys.indexOf(key)===-1){
keys.push(key);
output.push(item);
} });
console.log(output);
return output;
}
});
</script> 结果很迷人:
{"name":"明哥哥"} {"name":"小林黛玉"} {"name":"大哥大"}
2.如果要进行多个参数进行过滤:
<span ng-bind="d[h.key] | numFormat:h.adSrhType:camb"></span>
// 数字的千分符转换
.filter('numFormat',[function(){
return function numToThousands (n,valType,camb) {
if (valType === 'number' && n!== undefined && n!==null && n.toString().length > 0){
n = n.toString();
var re = /\d{1,3}(?=(\d{3})+$)/g;
n = n.replace(/^(\d+)((\.\d+)?)$/, function (s, s1, s2) { return s1.replace(re, '$&,') + s2;});
}
return n;
};
}])
最新文章
- 1.Hibernate简介
- 整理常用加密 iOS 与 Android 加密 MD5-SHA1
- [No00007B]DreamweaverCC 的CSS代码格式化
- jQuery WipeTouch
- (Python )控制流语句if、for、while
- Sqoop导入MySQL数据
- gcc编译命令
- 联系我们_你我想法_【有男度】UNANDU 100%进口 全球设计师品牌精汇 男装_男装搭配_时尚男装_品牌男装_男装搭配技巧_男装网站
- JQUERY的应用
- SQL中如何将一个表中的某一列的数据复制到另一个表中的某一列里
- log4j.properties 的使用详解
- DataTable的名称要后设置
- react简书笔记一 环境, git 和 项目 关联
- django后台密码错误
- Python学习(十三) —— 网络编程
- C. A Mist of Florescence
- 【Python】混合驱动实例
- java多线程例子(生成者和消费者)
- 使用TreeView加载XML文件
- js+jquery