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;
};
}])

  

 
  

ng自定义一个过滤器的更多相关文章

  1. vue自定义一个过滤器

    vue如何自定义一个过滤器 html代码: <div id="app"> <input type="text" v-model="m ...

  2. angularJS自定义一个过滤器

    ng允许我们自定义指令 下面来我们自己来定义一个过滤指令:filter,返回一个函数的形式 filter(name,callback(){//name:过滤器的名字,callback:匿名函数 ret ...

  3. ng 自定义过滤器的创建和使用

    过滤器的本质就是一个方法,参数就是输入的值以及给过滤器指定的参数,返回值就是处理后要显示的值. ①过滤器创建var app = angular.module();app.filter(‘名称’,fun ...

  4. 实现MVC自定义过滤器,自定义Area过滤器,自定义Controller,Action甚至是ViewData过滤器

    MVC开发中几种以AOP方式实现的Filters是非常好用的,默认情况下,我们通过App_Start中的FilterConfig来实现的过滤器注册是全局的,也就是整个应用程序都会使用的,针对单独的Fi ...

  5. 自定义jinja2 过滤器

    今天,我们要讲的是自定义jinja2 过滤器这个知识点,因为官方文档对此一代而过,讲得不够清楚,所以我们专门拿出来讲一下. 例子 例子写了两个自定义过滤器,一个是转换字典到字符串的过滤器,一个是返回当 ...

  6. MVC自定义过滤器,自定义Area过滤器,自定义Controller,Action甚至是ViewData过滤器

    实现MVC自定义过滤器,自定义Area过滤器,自定义Controller,Action甚至是ViewData过滤器 MVC开发中几种以AOP方式实现的Filters是非常好用的,默认情况下,我们通过A ...

  7. [C#].Net Core下全局自定义身份过滤器使用AllowAnonymous属性

    假设一种情况:项目中需要做认证和权限控制,而且需要权限才能访问的控制器要远多于可以匿名访问的(类似AO系统那样,登陆了才能用). 那在每个控制器上加一个 [Authorize] 是能解决问题,反正正我 ...

  8. ASP.NET Core中使用自定义MVC过滤器属性的依赖注入

    除了将自己的中间件添加到ASP.NET MVC Core应用程序管道之外,您还可以使用自定义MVC过滤器属性来控制响应,并有选择地将它们应用于整个控制器或控制器操作. ASP.NET Core中常用的 ...

  9. django -使用jinja2模板引擎 自定义的过滤器

    setting.py中 TEMPLATES = [ { 'BACKEND': 'django.template.backends.jinja2.Jinja2', 'DIRS': [os.path.jo ...

随机推荐

  1. (一) 从Angular1到Angular2的杂谈

    使用了angular1一年下来,完成了若干项目,承蒙此框架的强大带来了不算差的项目编写体验,但1.*版本的angular,确实是有厉害的地方也有其尴尬的地方,包括较多数据的渲染的性能问题,还有就是可能 ...

  2. Javascript 异步实现机制

    Javascript 单线程指的是在一个浏览器进程中只存在一个 Javascript 执行线程,所以任务需要顺序排列等待执行,而不能像 Java 等多线程语言一样并发执行.但是这种单线程模型在处理耗时 ...

  3. PhpCms_V9笔记

     一.建立虚拟站点 1.先更改www目录下的站点名称,再找到apache, 打开"Apache2\conf\extra"下的"httpd-vhosts.conf" ...

  4. 解决Ubuntu不能连接xshell

    首先,判断Ubuntu是否安装了ssh服务: 1.ps -e |grep ssh 如果服务已经启动,则可以同时看到“ssh-agent”和“sshd”,否则表示没有安装服务,或没有开机启动 2.安装s ...

  5. react基础学习

    什么是react:React(有时称为React.js 或ReactJS)是一个为数据提供渲染HTML视图的开源JavaScript库; 其特点: 声明式设计:采用声明范式,可以轻松描述应用高效:通过 ...

  6. Docker存储驱动之AUFS简介

    简介 AUFS是曾是Docker默认的首选存储驱动.它非常稳定.有很多真实场景的部署.很强的社区支持.它有以下主要优点: 极短的容器启动时间. 有效的存储利用率. 有效的内存利用率. 虽然如此,但由于 ...

  7. PHP字符串三种定义方式

    PHP的字符串有三种定义方式:单引号 .双引号 .定界符  1.单引号:指定一个简单字符串的最简单的方法是用单引号(字符 ')括起来. 在被单引号括起来的字符串中,要再表示一个单引号,需要用反斜线(\ ...

  8. 前端发展态势 && 前端工作流程个人浅析

    于在未开启cleartype的情况下,一些中文字体在非偶数字号下的显示效果欠佳,所以一般建议使用12.14.16.18.22px等偶数字号.也就 是对某个分辨率选择离它最近的偶数字号.例如:屏幕横向分 ...

  9. Jackson学习(一)

    Jackson的一些配置.使用方式以及效率方面的简单介绍. 1.jackson的maven依赖 <!-- jackson依赖 --> <dependency> <grou ...

  10. One Card Poker

    qsc oj 题目 提交 比赛 小组 排名 帮助 Mactavish 题目 我的提交 One Card Poker 发布时间: 2017年2月14日 14:02   最后更新: 2017年2月14日 ...