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

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. final、finally、finalize差异

    final.finally.finalize差异 1.final修饰符 它代表了一类是完美的类,它不能被继承,因此.一个类不能既被标记为final类别.同一时间被标记为abstract. 将变量或者函 ...

  2. php生成签名及验证签名

    <?php /** * 根据原文生成签名内容 * * @param string $data 原文内容 * * @return string * @author confu */ functio ...

  3. .NET源代码的内部排序实现

    使用JetBrains的DotPeek工具能够方便地查看.net的部分源代码.于是看了一下.NET的内部是怎样实现排序的算法. 在System.Collections.Generic 命名空间下能够看 ...

  4. WEB开发中常用的正则表达式集合

    在计算机科学中,正则表达式用来描述或者匹配一系列符合某个句法规则的字符串的单个字符串.在WEB开发中,正则表达式通常用来检测.查找替换某些符合规则的字符串,如检测用户输入E-mai格式是否正确,采集符 ...

  5. Perl基础(1)chop与chomp的区别

    chop是去掉字符串的最后一个字符 chomp是去掉"$/"指定的结尾符号 测试程序一: [perl] #!/bin/perl $tmp = "sincere" ...

  6. [译]Java 设计模式之外观

    (文章翻译自Java Design Pattern: Facade) 外观设计模式隐藏了任务的复杂性而只是提供了一个简单的接口.一个非常好的例子就是计算机的启动.当一个计算机启动的时候,它涉及CUP. ...

  7. 【转】Android学习之AndroidManifest.xml清单之<uses-feature>

    无意之中看了几个小时的官方英文文档,关于<uses-feature>的介绍.有必要在这里记录一下,应该有很多人不知道<uses-feature>到底是做什么用的,因为我们平时根 ...

  8. Android开发Tips-1

    打算记录一些自己在开发过程中遇到的一些技巧性代码,方便以后遇到相似功能时能够快速的找到,那就从这里开始吧. 1,如何截取当前屏幕(不包括当前Activity的Title)并分享: a,获取当前Acti ...

  9. 推荐几个JSON工具

    JSON查看 http://jsonviewer.codeplex.com/ JSON转类(非常好使) http://jsonclassgenerator.codeplex.com https://g ...

  10. 关于Dictionary字典和List列表

    命名空间System.Collections.Generic中有两个非常重要,而且常用的泛型集合类,它们分别是Dictionary<TKey,TValue>字典和List<T> ...