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自定义一个过滤器的更多相关文章

  1. vue自定义一个过滤器

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

  2. angularjs自定义日期过滤器，如：周日（前天 21:24）

    今天给大家分享一个,我在项目中自定义的一个日期过滤器.具体过滤出来的效果可参看下图: 用法: {{ time | timeFilter }} filter: App.filter('timeFilte ...

  3. ng自定义一个过滤器

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

  4. 前端MVC学习总结（二）——AngularJS验证、过滤器、指令

    一.验证 angularJS中提供了许多的验证指令,可以轻松的实现验证,只需要在表单元素上添加相应的ng属性,常见的如下所示: <input Type="text" ng-m ...

  5. 前端MVC学习总结——AngularJS验证、过滤器

    前端MVC学习总结--AngularJS验证.过滤器 目录 一.验证 二.过滤器 2.1.内置过滤器 2.1.1.在模板中使用过滤器 2.1.2.在脚本中调用过滤函数 2.2.自定义过滤器 三.指令( ...

  6. 前端MVC学习笔记（二）——AngularJS验证、过滤器、指令

    一.验证 angularJS中提供了许多的验证指令,可以轻松的实现验证,只需要在表单元素上添加相应的ng属性,常见的如下所示: <input Type="text" ng-m ...

  7. AngularJs自定义过滤器filter

    AngularJs自带有很多过滤器,现在Insus.NET演示一个自定义的过滤器,如实现一个数据的平方. 本演示是在ASP.NET MVC环境中进行. 创建一个app: 创建一个控制器: 接下来是重点 ...

  8. angularjs自定义过滤器

    实现一个按输入框中的数据筛选的功能,筛选可按电影的名称.年份.评分检索框: <input type="text" placeholder="可检索名字评分和年份&q ...

  9. angularjs之filter过滤器

    现在公司用ionic,就是基于angularjs封装了一些api用于webapp,最近用的angularjs的filter确实省了很多代码,现在总结一下! ng比较鸡肋的过滤器,这里就一笔带过吧!鸡汤 ...

随机推荐

  1. Putty实现Linux与Windows互传文件

    putty远程连接VPS,先开一贴,有空来整理. 从putty官网下载putty,选择[A Windows installer for everything except PuTTYtel]安装包,下 ...

  2. RabbitMQ消息队列（十）RPC应用2

    基于RabbitMQ RPC实现的主机异步管理 地址原文:http://blog.51cto.com/baiying/2065436,作者大大,我把原文贴出来了啊.不要告我 root@ansible: ...

  3. Isolation Forest原理总结

    Isolation Forest(以下简称iForest)算法是由南京大学的周志华和澳大利亚莫纳什大学的Fei Tony Liu, Kai Ming Ting等人共同提出,用于挖掘异常数据[Isola ...

  4. 009-对象—— 构造方法__construct析构方法__destruct使用方法 PHP重写与重载

    <?php /**构造方法__construct析构方法__destruct使用方法 PHP重写与重载 */ //构造方法:当实例化对象时,自动运行的方法 /*class channel{ fu ...

  5. 【codeforces-482div2-C】Kuro and Walking Route(DFS)

    题目链接:http://codeforces.com/contest/979/problem/C Kuro is living in a country called Uberland, consis ...

  6. dell c6220II lsi阵列卡

    1.如果在lsi阵列卡上有多个raid,那么需要在第一个创建的raid上装系统,或者说先创建装系统的raid,否则可能报 hard disk error(centos 6.6) 2.热插拔的后果:如果 ...

  7. vue单独给页面设置body属性

    因项目需求:用户个人详细信息页面设置背景色,之前在这个页面设置最外层div发现不行.因为app.vue影响了它.后来直接在页面上用body设置样式,发现影响了其他页面. 后来想了通过vue的生命周期来 ...

  8. APUE学习笔记——3.文件共享与fcntl介绍

    基本概念 内核使用3个数据结构描述一个打开的文件:进程表.文件表.V节点表 首先了解3种数据结构的概念     1 进程表         每一个进程有一个进程表.进程表里是一组打开的文件描述符,如标 ...

  9. Linux：col命令详解

    col 经常用于将说明文件转存为纯文本以方便阅读 语法 col(选项) 选项 -b:过滤掉所有的控制字符,包括RLF和HRLF: -f:滤掉RLF字符,但允许将HRLF字符呈现出来: -x:以多个空格 ...

  10. EasyRTMP+EasyRTSPClient实现的多路(支持断线重连)RTSP转RTMP直播推流工具

    本文转自EasyDarwin开源团队成员Kim的博客:http://blog.csdn.net/jinlong0603/article/details/73441405 介绍 EasyRTMP是Eas ...