自定义过滤器需要使用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. makefile:2: *** 遗漏分隔符 。 停止

    from http://hi.baidu.com/��֮��/blog/item/8ec00e2aca65a525d42af11b.html 我们在编写完makefile,然后在终端中 $make出现 ...

  2. 微信支付开发-当前页面的URL未注册

    微信支付的开发设置要求设置微信支付可以发起的目录. 当出现“当前页面的URL未注册”的错误时,检查你的授权目录(一般是未填写或填写有误),注意要二级或者三级目录完全匹配.

  3. try it, then you know . Emacs

     原来Emacs能做时间管理 http://sachachua.com/blog/2012/07/transcript-emacs-chat-john-wiegley/ http://blog.csd ...

  4. 【转】解决IIS7该问.svc文件的错误问题

        解决IIS7.5中部署WCF时,访问.svc文件的404错误问题如果你直接在IIS 7中配置WCF,访问.svc文件时会出现404错误.解决方法,以管理员身份进入命令行模式,运行:" ...

  5. 计算机病毒实践汇总六:IDA Pro基础

    在尝试学习分析的过程中,判断结论不一定准确,只是一些我自己的思考和探索.敬请批评指正! 1. IDA使用 (1)搜索.下载并执行IDA Pro,对可执行程序lab05-01.dll进行装载,分别以图形 ...

  6. (转)UIWebView全部API学习

    网上找的收藏一下 http://www.myexception.cn/web/1888974.html 最生僻的API做了下划线以及粗体的标注.百度上查了全是拷贝的同一份代码,而且只有代码没有解释,很 ...

  7. 何为babel / gulp

    Babel主要用来将新版本的javascript(ES6,ES7)编译为ES5,目前它对于新标准的支持程度甚至高于Chrome浏览器.通过引入预设babel-preset-react,babel还能解 ...

  8. jquery版本清单

    PM> Install-Package jQuery -Version 1.11.2 jQuery 2.1.3 (latest stable) 315444 Wednesday, Decembe ...

  9. sql中修改多表关联的字段

    表1:USERID USERNAME USERREMARK 表2:ROLEID USERID ROLENAME 其中表1的USERID与表2的USERID为关联字段. 若现在只知道ROLEID,要修改 ...

  10. 从H264码流中获取视频宽高 (SPS帧) 升级篇

    之前写过 <从H264码流中获取视频宽高 (SPS帧)> . 但发现很多局限性,而且有时解出来是错误的. 所以重新去研究了. 用了 官方提供的代码库来解析. 花了点时间,从代码库里单独把解 ...