自定义过滤器需要使用filter函数,格式如下:

  filter("filterName',function(){

    return function(target,args){

    ....

    }

  }

  filter函数的第一个参数是这个自定义过滤器的名称,第二个函数是个回调函数,在这个函数中需要返回一个函数(inner),在inner函数中我们需要把具体的代码实现封装进去。而inner的第一个从参数target是目标参数,就是需要进行过滤的数据,第二个参数是需要在这个自定义过滤器中传入的参数,例如系统自带的过滤器number:2,此时2就是传入过滤器的参数,也就对应于自定义过滤器的第二个参数。

  下面是个具体的例子:

  

<div ng-controller = 'ctrl'>
<h2>{{name | define}}</h2>
</div>
<script>
var app = angular.module('app',[]);
app.filter('define',function(){
var go = function(na){
var str = na.split(' ');
for(var i = 0; i < str.length; i++){
str[i] = str[i].charAt(0).toUpperCase() + str[i].substring(1);
}
return str.join(' ');
}
return go;
});
app.controller('ctrl',function($scope){
$scope.name = 'this is a demo';
});
</script>

  这段代码中的过滤器的作用是将文本中的单词首字母大写。(该代码借鉴于流浪猫の窝)。

angular之自定义过滤器的使用的更多相关文章

  1. -_-#【Angular】自定义过滤器

    AngularJS学习笔记 <!DOCTYPE html> <html ng-app="Demo"> <head> <meta chars ...

  2. angular入门--自定义过滤器

    <html ng-app='app1'> <head> <meta name="generator" content="HTML Tidy ...

  3. 简述angular自定义过滤器在页面和控制器中的使用

    首先设置自定义过滤器. 定义模块名:angular ? 1 2 3 4 5 6 .module('myApp') .filter('filterName',function(){ return fun ...

  4. angular自定义过滤器在页面和控制器中的使用

    首先设置自定义过滤器. 定义模块名:angular .module('myApp') .filter('filterName',function(){ return function(要过滤的对象,参 ...

  5. Angular——自定义过滤器

    基本介绍 除了使用AngularJS内建过滤器外,还可以根业务需要自定义过滤器,通过模块对象实例提供的filter方法自定义过滤器. 基本使用 (1)input是将绑定的数据以参数的形式传入 (2)i ...

  6. angular自定义过滤器操作实例

    //模块名字var filters = angular.module("customFilter",[]);//过滤器名字filters.filter("uniqueCa ...

  7. 秒味课堂Angular js笔记------过滤器

    不同过滤器的小demo. currency number uppercase json limitTo date orderBy filter <script> var filterMy ...

  8. AngularJs练习Demo8 自定义过滤器

    @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport&quo ...

  9. angularJS自定义 过滤器基础

    先写个简单的例子,该过滤器是指定规定的字符串长度: html: <div ng-app="app" ng-controller="ctrl"> &l ...

随机推荐

  1. {Reship}{KMP字符串匹配}

    关于KMP字符串匹配的介绍和归纳,作者的思路非常清晰,推荐看一下 http://blog.csdn.net/v_july_v/article/details/7041827

  2. 基于log4net的支持动态文件名、按日期和大小自动分割文件的日志组件

    最近处理一个日志功能,用log4net的配置不能完全满足要求,所以在其基础上简单封装了一下,支持以下功能: 1 零配置 内置默认配置,引用dll后不需要添加或修改任何配置文件也可以使用 2 动态指定文 ...

  3. GitHub上最火的40个Android开源项目

    http://www.csdn.net/article/2013-05-03/2815127-Android-open-source-projects

  4. AS3 转 Java

    不错,我就是as3转java的程序猿. 大概两年前加过as3的QQ群里,有很多群友说as3发展前景不好,很多要转语言.我当时也想转,一直苦于没机会.现在机会终于来了... 首先说明一点,as3并不会像 ...

  5. php底层

    http://www.phpchina.com/member.php?mod=logging&action=login 我们从未手动开启过PHP的相关进程,它是随着Apache的启动而运行的: ...

  6. js上传压缩图片

    原文链接:http://blog.csdn.net/iefreer/article/details/53039848 手机用户拍的照片通常会有2M以上,这对服务器带宽产生较大压力. 因此在某些应用下( ...

  7. 循序渐进Python3(十)-- 1 -- pymysql

    使用pymsql 模块操作数据库 #!/usr/bin/env python , ),()]), user='root', passwd='123456', db='test')# 创建游标curso ...

  8. Android Studio启动模拟器

    创建模拟器时出现vt x is disabled in bios 出现错误提示:"Intel HAXM is required to run this AVD,VT-x is disable ...

  9. obeject-c 与 swift 混编

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px ".PingFang SC"; color: #454545 } p.p2 ...

  10. java io流之字节流

    字节流 字节流主要是操作byte类型数据,以byte数组为准,主要操作类就是OutputStream.InputStream 字节输出流:OutputStream OutputStream是整个IO包 ...