自定义一个用户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. 格式化用jad反编译混淆过的代码，能去大部分错误 (zhuanzai)

    http://blog.csdn.net/chruan/article/details/8484783

  2. cf C. Prime Number

    http://codeforces.com/contest/359/problem/C 先求出分子的公因子,然后根据分子上会除以公因子会长生1,然后记录1的个数就可以. #include <cs ...

  3. LeetCode_Best Time to Buy and Sell Stock III

    Say you have an array for which the ith element is the price of a given stock on day i. Design an al ...

  4. Altium Designer 覆铜时过孔连接形式的设置——只将过孔连接设置为Direct Connect

    Altium Designer 在PCB覆铜时,所有的过孔和焊盘都是十字连接即Relief Connect连接的,没有像PROTEL 99SE一样只有接地的焊盘才是十字连接而过孔是直接连接的. 如下图 ...

  5. Linux企业级项目实践之网络爬虫（10）——处理HTTP状态码

    HTTP状态码(HTTP Status Code)是用以表示网页服务器HTTP响应状态的3位数字代码.所有状态码的第一个数字代表了响应的五种状态之一.他们分别是:消息(1字头)成功(2字头)这一类型的 ...

  6. hdu5045：带权二分图匹配

    题目大意 : n个人 做m道题,其中 每连续的n道必须由不同的人做 已知第i人做出第j题的概率为pij,求最大期望 思路:考虑每连续的n道题 都要n个人来做,显然想到了带权的二分图匹配 然后就是套模板 ...

  7. 面试题32.从1到n整数中1出现的次数

    题目:输入一个整数n,求从1到n这n个整数的十进制表示中1出现的次数.例如输入12,从 1到12这些整数中包含1的数字中1,10,11和12,1一共出现了5次 本题可以直接变量1到n的n个数然后分别计 ...

  8. One手动玩转

    <preface p2 by Ruiy,我就在开头简单奇葩两句!> 老周被查,涉及到政治问题,我先就不聊了,但Ruiy叹那,都查到七*务了,土党唱哪一出! 能基本玩转OpenNebula都 ...

  9. js面向对象的五种写法

    第一种: //第1种写法 function Circle(r) { this.r = r; } Circle.PI = 3.14159; Circle.prototype.area = functio ...

  10. App上线流程全攻略(续)-iOS8之后的改动与所遇日常错误

    随着iOS8的公布,iTunes Connect的界面也是发生了非常大的改变,App 上传到 Store上面的步骤也是发生了些改变.以下继续用图说话: /*********************** ...