先写个简单的例子,该过滤器是指定规定的字符串长度:

html:

<div ng-app="app" ng-controller="ctrl">
<p ng-repeat="text in texts>
{{book | limitText:10}}
</p>
</div>

js:

var app = angular.module("app",[]);
app.filter('limitText', function() {
return function(input, num) {
if(input.length>num){
input = input.substring(0,num)+"...";
}
return input;
};
});
app.controller("ctrl",["$scope",function($scope){
$scope.texts = ["大帅哥多发个梵蒂冈梵蒂冈","法规的非官","儿童热太热一天如图于一体"];
}]);

显示

大帅哥多发个梵蒂冈梵...

法规的非官

儿童热太热一天如图于...

自定义过滤器可以接受参数(可多个),也可以不用参数。

但参数必须写在return 后面函数的第二个参数里,第一个参数是要处理的对象。

多个参数的用法

{{ expression | filter:argument1:argument2:... }}

angularJS自定义 过滤器基础的更多相关文章

  1. 创建 AngularJS 自定义过滤器,带自定义参数

    Angularjs过滤器是 angularjs非常棒的特性之一.有朝一日,你可能需要使用自定义过滤器,幸运的是,你找到了这篇博文. 下面显示的是自定义过滤器长什么样子(请注意myfilter): &l ...

  2. angularJS自定义过滤器、服务和指令

    自定义过滤器 mainApp.filter('mayfilter',function(){ return function(input){ (过滤逻辑代码) } });   自定义创建指令 mainA ...

  3. AngularJs自定义过滤器filter

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

  4. angularjs自定义过滤器

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

  5. AngularJs filter 过滤器基础【转】

    Filter Ng里的过滤器. currency:把一个数字格式化成货币模式(如$1,234.56).当没有提供任何货币符号时,默认使用当前区域的符号. 使用: HTML:{{ currency_ex ...

  6. 关于angularjs 中自定义过滤器

    包子认为,在angularjs中,经常需要用到自定义过滤器,来过滤相应的功能,自定义过滤器非常的简单,我就直接贴代码啦 其中input就是你需要进行操作的对象,,,用法就直接就是 是不是很easy.. ...

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

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

  8. AngularJS实现的自定义过滤器简单示例

    本文实例讲述了AngularJS实现的自定义过滤器.分享给大家供大家参考,具体如下: 1.自定义限制字数的过滤器 啥也不说了直接上代码吧 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 ...

  9. AngularJS中自定义过滤器

    AngularJS中为我们提供了一些内置的过滤器,这里列举一些自定义过滤器的场景. 自定义过滤器,不带参赛 //过滤 不带参赛 app.filter('ordinal', function () { ...

随机推荐

  1. php 常用 小知识点

    PHP 邮箱正则表达式代码如下: /^([a-z0-9])(([-a-z0-9._])*([a-z0-9]))*\@([a-z0-9])*(\.([a-z0-9])([-a-z0-9_-])([a-z ...

  2. 快速构建Windows 8风格应用34-构建Toast通知

    原文:快速构建Windows 8风格应用34-构建Toast通知 引言 开发过WindowsPhone应用或者使用过WindowsPhone手机的开发者都知道,我们会收到一些应用的提示信息,这些提示信 ...

  3. 【原版的:参赛作品】窥秘懒---android打开下拉手势刷新时代

    小飒的成长史原创作品:窥视懒人的秘密---android下拉刷新开启手势的新纪元转载请注明出处 **************************************************** ...

  4. 解决:错误的语法:”XXXX“必须是批处理中仅有的语句

    原文:解决:错误的语法:”XXXX“必须是批处理中仅有的语句   SQL Server 数据库提示“错误的语法:”XXXX“必须是批处理中仅有的语句”报错的原因分析 解析:批处理必须以 CREATE ...

  5. Memcached在.Net中的基本操作

    Memcached在.Net中的基本操作 一.Memcached ClientLib For .Net 首先,不得不说,许多语言都实现了连接Memcached的客户端,其中以Perl.PHP为主. 仅 ...

  6. PHP类

    类就是很多方法的集合这些方法是你在程序中经常会用到的一些逻辑或算法将他们包进类里面,可以提升程序的效率,减少代码的重复 比如你有一个类文件 web_common.class.php ,里面有一个类,名 ...

  7. Javascript多线程引擎(十)---Web服务器

     Javascript多线程引擎(十)---Web服务器 经过一天的努力, 引擎可以支持web服务的功能了并且支持UTF-8的编码, 具有对HTTP参数的解析,状态码的配置, 响应报文的输出等. 提供 ...

  8. 关于ListView中convertView的缓存个数的探究

    在面试的时候经常会被问到一个有关ListView的问题:一个ListView的高度最多可以显示5个item,但是却有20条数据要显示,问最多会有多少个convertView会被复用?或者如在ListV ...

  9. Working with Entity Relations in OData

    Working with Entity Relations in OData 前言 阅读本文之前,您也可以到Asp.Net Web API 2 系列导航进行查看 http://www.cnblogs. ...

  10. D0

    刚到长乐就被机房里众大神的气场给压倒了 orz....... 然后默默的感觉到自己貌似已经有一个星期没有打题了...就各种忧伤.... 还是说一下今天的计划吧 嗯傍晚5.30-6.00 &&a ...