自定义一个用户Email长度超过12个字符后值截取前12个然后添加“...”显示。

例如：

index.html

<!DOCTYPE html>

<html ng-app="myApp">

    <head>

        <title>TODO supply a title</title>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <link rel="stylesheet" href="../css/uikit.css"/>

        <link rel="stylesheet" href="../css/my-uikit.css"/>

    </head>

    <body>

        <div class="uk-panel" ng-controller="UserCtrl">

            <table class="uk-table uk-table-hover uk-table-striped">

                <thead>

                    <tr class="uk-bg-primary">

                        <th>Name</th>

                        <th>Email</th>

                    </tr>

                </thead>

                <tbody ng-repeat="user in users "  class="uk-text-success">

                    <tr>

                        <td>{{user.name }}</td>

                        <td>{{user.email | subStrFilter:12}}</td>

                    </tr>

                </tbody>

            </table>

        </div>

    </body>

    <script src="../js/angular.js"></script>

    <script src="index.js"></script>

</html>

定义的filter名称为：subStrFilter,注意function(limitToFilter),limitTo表示angular内置的limitTo过滤器，我们自定义的过滤器依赖与limitTo过滤器，参数input表示被过滤的字段值，limit表示最大长度，使用方式：

<td>{{user.email | subStrFilter:12}}</td>

index.js

var myApp = angular.module('myApp', []);

myApp.filter('subStrFilter', function(limitToFilter){

    return function(input, limit){

        if(input.length>limit){

            return limitToFilter(input,limit-3)+'...';

        }

        return input;

    };

});

myApp.controller('UserCtrl', ['$scope', function($scope){

        $scope.users = [

            {

                name:'张三',

                email:'zhangsan@gmail.com'

            },

            {

                name:'李四',

                email:'lisi@123.com'

            },

            {

                name:'王五',

                email:'wangwu@qq.com'

            }

        ];

}]);

自定义Filter服务的更多相关文章

  1. angular的$filter服务

    首先,介绍下$filter服务: 1.$filter是用来进行数据格式化的专用服务: 2.AngularJS内置了currency.date.filter.json.limitTo.lowercase ...

  2. Spring Security 入门（1-6-2）Spring Security - 内置的filter顺序、自定义filter、http元素和对应的filterChain

    Spring Security 的底层是通过一系列的 Filter 来管理的,每个 Filter 都有其自身的功能,而且各个 Filter 在功能上还有关联关系,所以它们的顺序也是非常重要的. 1.S ...

  3. Zuul【自定义Filter】

    实际业务中,如果要自定义filter过滤器,只需集成ZuulFIlter类即可,该类是个抽象类,它实现了IZuulFIlter接口,我们需要实现几个方法,如下示例: import static org ...

  4. Asp.net mvc自定义Filter简单使用

    自定义Filter的基本思路是继承基类ActionFilterAttribute,并根据实际需要重写OnActionExecuting,OnActionExecuted,OnResultExecuti ...

  5. SharePoint 2013 中自定义WCF服务

    在使用SharePoint2013的时候,如果其他客户端 API 的组合不足,可以通过自定义 Web 服务扩展 SharePoint.默认情况下,SharePoint 2013 不仅支持创建自定义 A ...

  6. 自定义Attribute 服务端校验 客户端校验

    MVC 自定义Attribute 服务端校验 客户端校验/* GitHub stylesheet for MarkdownPad (http://markdownpad.com) *//* Autho ...

  7. 阿里云容器服务--配置自定义路由服务应对DDOS攻击

    阿里云容器服务--配置自定义路由服务应对DDOS攻击 摘要: 容器服务中,除了slb之外,自定义路由服务(基于HAProxy)也可以作为DDOS攻击的一道防线,本文阐述了几种方法来应对普通规模的DDO ...

  8. 自定义Window 服务

    自定义window 服务 开发到使用的流程: 1.完成对应的代码之后(代码在底下),右键MyService.cs 添加安装程序 2.添加window服务安装程序打开Service1.cs[设计]页面, ...

  9. Jinja2模版语言自定义filter的使用

    Jinja2模版语言,自带有一些filter,能够在前端的模版中控制数据按照相应的方式显示.比如以下两种filter,分别能在前端控制数字的近似精度显示和根据字符串长度补齐: round(value, ...

随机推荐

  1. 扩展Log4j支持JNDI数据源

    log4j.properties配置文件: log4j.rootLogger=INFO,db #使用log4j扩展支持JNDI数据源 log4j.appender.db=com.qdgswx.log4 ...

  2. windows CMD.exe下写路径太长的解决方案

    1.直接找到文件拖进cmd里,路径就出来了. 2.在文件目录的空白处,按住shift键,再点击右键,就出来再此处打开命令行窗口了. 相关CMD.exe的加强项目: https://github.com ...

  3. 【转】android 5.0 64bit系统加载库文件失败问题浅析

    原文网址:http://blog.csdn.net/andrewblog/article/details/43601303 最近公司的一个项目使用android 5.0 64 bit平台,相对以前版本 ...

  4. QQ地图api里的 地址解析函数 看不懂 javascript_百度知道

    QQ地图api里的 地址解析函数 看不懂 javascript_百度知道     QQ地图api里的 地址解析函数 看不懂 javascript    2011-09-18 12:18     匿名 ...

  5. hdu 2254 奥运

    点击打开hdu 2254 思路: 矩阵乘法 分析: 1 题目给定一个有向图,要求t1-t2天内v1-v2的路径的个数 2 根据离散数学里面的可达矩阵的性质,我们知道一个有向图的邻接矩阵的前n次幂的和即 ...

  6. Erlang ODBC 处理中文

    erlang处理utf8字符集相对比较简单,因为它是用integer的list来保存所有的string的,所以处理什么字符集都没关系. 话虽这么说,但我在使用erlang的ODBC处理中文时,着实费了 ...

  7. lucene 高亮显示

    原文地址: http://blog.csdn.net/javaman_chen/article/details/8224407 Lucene针对高亮显示功能提供了两种实现方式,分别是Highlight ...

  8. C++中的对象数组

    类是对象的抽象,我们可以使用一个类来定义很多的对象,然后每个对象都有自己的属性. 当我们使用类来定义很多相同结构的对象的时候,我们可以采取对象数组的方法. 例如,一个班有50个学生,我们定义了一个学生 ...

  9. [RxJS] Getting Input Text with Map

    By default, Inputs will push input events into the stream. This lesson shows you how to use map to c ...

  10. js_day14