自定义一个用户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. Express4 Route笔记

    可以参考Express官网关于路由一节:http://expressjs.com/guide/routing.html 1:通过使用GET.POST方式定义主页路由,app.js: var expre ...

  2. Keil伪指令

    Keil伪指令 目录 Keil伪指令... 1.     ALTNAME. 2 2.     BIT. 2 3.     BSEG.. 2 4.     CODE. 2 5.     CSEG.. 2 ...

  3. 二极管IN4001~IN4007参数

    电压范围50~1000V 正向导通电流1A 导通电压降:1.1V 具体见下图:

  4. 原型模式 - OK

    原型模式(Prototype),用原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象. 简单说来原型模式就是从一个对象再创建另外一个可定制的对象,而且不需知道任何创建的细节. 原型模式UML ...

  5. 完美：adobe premiere cs6破解版下载[序列号+汉化包+破解补丁+破解教程]

    原文地址:http://blog.sina.com.cn/s/blog_6306f2c60102f5ub.html 完美:adobe premiere cs6破解版下载,含序列号.汉化包.注册机.破解 ...

  6. IP转发和子网路由

    IP地址的分类 在TCP/IP协议中,协议栈分为4层.从上到下依次是应用层.运输层.网络层.网络接口层. IP协议就工作在网络层.IP协议将纷繁复杂的物理层协议屏蔽掉,对上层提供统一的描述和管理服务. ...

  7. keepalived vip漂移基本原理及选举算法

    keepalived可以将多个无状态的单点通过虚拟IP(以下称为VIP)漂移的方式搭建成一个高可用服务,常用组合比如 keepalived+nginx,lvs,haproxy和memcached等.它 ...

  8. .NET基础拾遗（4）委托为何而生？

    生活中的例子: 你早上要吃包子作为早饭,那么你可能让你爸爸或者妈妈帮你做,那你就会调用 爸爸.要包子() 或妈妈.要包子() 返回包子对象. 但是如果你爸妈不在家的时候,你只能去街上买,问题是你根本不 ...

  9. DEV GridControl 鼠标单击事件

    private void gridView1_RowClick(object sender, DevExpress.XtraGrid.Views.Grid.RowClickEventArgs e) { ...

  10. EF中加载实体的方式

    EF中的查询执行时机:1. foreach进行枚举2. ToArray.ToList.ToDictionary3. Linq的一些操作,如First.Any4. DbSet上的Load操作.DbEnt ...