angularJS自定义一个过滤器
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;
};
}])
angularJS自定义一个过滤器的更多相关文章
- vue自定义一个过滤器
vue如何自定义一个过滤器 html代码: <div id="app"> <input type="text" v-model="m ...
- angularjs自定义日期过滤器，如：周日（前天 21:24）
今天给大家分享一个,我在项目中自定义的一个日期过滤器.具体过滤出来的效果可参看下图: 用法: {{ time | timeFilter }} filter: App.filter('timeFilte ...
- ng自定义一个过滤器
ng允许我们自定义指令 下面来我们自己来定义一个过滤指令:filter,返回一个函数的形式 filter(name,callback(){//name:过滤器的名字,callback:匿名函数 ret ...
- 前端MVC学习总结（二）——AngularJS验证、过滤器、指令
一.验证 angularJS中提供了许多的验证指令,可以轻松的实现验证,只需要在表单元素上添加相应的ng属性,常见的如下所示: <input Type="text" ng-m ...
- 前端MVC学习总结——AngularJS验证、过滤器
前端MVC学习总结--AngularJS验证.过滤器 目录 一.验证 二.过滤器 2.1.内置过滤器 2.1.1.在模板中使用过滤器 2.1.2.在脚本中调用过滤函数 2.2.自定义过滤器 三.指令( ...
- 前端MVC学习笔记（二）——AngularJS验证、过滤器、指令
一.验证 angularJS中提供了许多的验证指令,可以轻松的实现验证,只需要在表单元素上添加相应的ng属性,常见的如下所示: <input Type="text" ng-m ...
- AngularJs自定义过滤器filter
AngularJs自带有很多过滤器,现在Insus.NET演示一个自定义的过滤器,如实现一个数据的平方. 本演示是在ASP.NET MVC环境中进行. 创建一个app: 创建一个控制器: 接下来是重点 ...
- angularjs自定义过滤器
实现一个按输入框中的数据筛选的功能,筛选可按电影的名称.年份.评分检索框: <input type="text" placeholder="可检索名字评分和年份&q ...
- angularjs之filter过滤器
现在公司用ionic,就是基于angularjs封装了一些api用于webapp,最近用的angularjs的filter确实省了很多代码,现在总结一下! ng比较鸡肋的过滤器,这里就一笔带过吧!鸡汤 ...
随机推荐
- OGNL表达式语言中的"#"和"$"的区别
Struts2使用标准的Context来进行OGNL表达式语言求值,OGNL的顶级对象是一个Context,这个Context对象就是一个Map类型实例,其根对象就是ValueStack,如果需要访问 ...
- Windows、Ubuntu双系统正确卸载Ubuntu系统
先判断启动方式,以管理员身份打开cmd或者power shell,输入bcdedit,找到path那一行,如果是winload.efi就是uefi引导,若为exe就是legacy引导 或者win+r输 ...
- linux-Centos7安装nginx
首先配置linux环境,我这里是刚刚装好linux,所以一次性安装了一系列我需要到的环境: yum install pcre pcre-devel zlib zlib-devel openssl op ...
- NC 工具的使用教程
NC工具的使用说明...nc使用说明 参数介绍: nc.exe -h即可看到各参数的使用方法. 基本格式:nc [-options] hostname port[s] [ports] ... nc - ...
- 四元数 Quaternion
最近在重写自己游戏引擎的场景管理模块,重温了一下有关四元数的一些知识,在此做一下简单的笔记. 四元数可以用来准确地描述三维矢量的旋转,并且可以有效地表达多个旋转操作的叠加,因此在三维游戏引擎的场景管理 ...
- 014PHP基础知识——流程控制（二）
<?php /** *switch 分支语句: * switch(表达式){ * case 值1: * ... * break; * * case 值2: * ... * break; * de ...
- IOC与DI简介
IOC:控制反转(Inverse Of Control) 在没用spring框架之前我们是这样写程序的: private UserDao userDao = new UserDaoImpl(); 也就 ...
- 目标跟踪算法meanshift优缺点
原博主:http://blog.csdn.net/carson2005/article/details/7341051 meanShift算法用于视频目标跟踪时,采用目标的颜色直方图作为搜索特征,通过 ...
- mac svn: E210004: Number is larger than maximum
SVN服务器IP地址发现改变,在Eclipse中的SVN资源库中执行Relocate重定位时发生错误: mac svn: E210004: Number is larger than maximum ...
- Go语言打印调用堆栈
Go语言打印调用堆栈 这两天看Go的代码,呃,协程太多,无数个携程调用了一个方法,彻底看不清了,所以就想到是不是可以把调用堆栈打印出来. 查了一下,发现Go的 runtime/debug 库可以把调用 ...