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. css居中问题

    学习过程中遇到css居中问题 , 也查阅了资料,每个人的方法都不尽相同,而且当时看懂了,过后就记混淆了;so作为一个前端小白,也来写一下俗话说好脑子不如烂笔头,毕竟自己知道的也不多,其实是抱着学习和交 ...

  2. jQuery_第二章_定时器

  3. Weinre 远程调试移动端页面

    Weinre 是一款远程调试工具,使用JS编写, 可以让我们在电脑上直接调试运行在手机上的远程页面,当你的代码已经发布上线,这时候出现了问题,Weinre就可以帮你调试. 调试场景 调试页面在手机上. ...

  4. centos快速安装redis

    mkdir redis cd redis wget http://labfile.oss.aliyuncs.com/files0422/redis-2.8.9.tar.gz 解压 tar -xvfz ...

  5. Activemq 宕机解决方案

    关于消息服务的集群,大概分为Consumer集群(消费者集群)和Broker集群(消息服务器集群)两种.ActiveMQ提供了一种叫做失效转移(也叫故障转移,FailOver)的策略.失效转移提供了在 ...

  6. HTML 5入门知识（三）

    <canvas>标签 在网页中使用canvas元素,像使用其他HTML标签一样简单,然后利用JavaScript脚本调用绘图API,绘制各种图形.canvas拥有多种绘制路径.矩形.圆形. ...

  7. WebSite---前台系统图片验证码心得

    背景: 因为移动端APP和Msite手机注册发送短信验证码没有添加图片验证码功能.公司的短信接口被恶意刷取.所以我们就觉得在移动端添加一个图片验证码功能.分享一下大体实现方式思路.PS demo是自己 ...

  8. html基础知识1（基本标签）2017-03-07

    摘要:php基础知识1 内容:大学中虽有接触,却是以学生的心态去应付考试的,学的都是理论知识:从今天开始我同样还是要以学生的心态去学习,但却要以要从事工作的心态去练习. 以下为第一天所学内容,因电脑原 ...

  9. 基于Spring-WS的Restful API的集成测试

    在很多Java企业级应用中,Spring占据了非常重要的位置,这就导致了基本上的技术选型都是围绕着Spring来, 比方说笔者最近的项目需要开发一个Restful的API接口,选型的时候就说,客户架构 ...

  10. springMVC中文乱码问题解决

    1:表单提交controller获得中文参数后乱码解决方案 注意:  jsp页面编码设置为UTF-8 form表单提交方式为必须为post,get方式下面spring编码过滤器不起效果 <%@  ...