自定义一个用户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. PYTHON线程知识再研习G--线程间通信Event

    很多时候,线程之间会有互相通信的需要.常见的情形是次要线程为主要线程执行特定的任务,在执行过程中需要不断报告执行的进度情况.前面的条件变量同步已经涉及到了线程间的通信(threading.Condit ...

  2. Qt也有垃圾回收（通过QScopedPointer实现），下决心在项目里使用QScopedPointer，省了太多事情了，而且更安全！！

    也谈Qt的垃圾回收 前几天在做代码审核的时候,Kai Uwe Broulik建议使用QScopedPointer来替代手工内存管理,使用后发觉确实节约了不少代码量,我的CHERRY可以延长寿命了!但是 ...

  3. 【转】Android 之 下拉框(Spinner)的使用

    原文网址:http://imshare.iteye.com/blog/770950 下拉列表 Spinner. Spinner的使用,可以极大提高用户的体验性.当需要用户选择的时候,可以提供一个下拉列 ...

  4. 【转】putty基本操作--不错

    原文网址:http://www.cnblogs.com/skynext/p/3256035.html putty基本操作 1,进入全屏 标题栏右键,菜单中就有full screen选项. 2,退出全屏 ...

  5. 在OCX初始化时获取其在网页中的DOM对象

    OCX初始化的时候会调用SetClientSite,会传入IOleClientSite对象. CComQIPtr<IOleControlSite, &IID_IOleControlSit ...

  6. hdu3401：单调队列优化dp

    第一个单调队列优化dp 写了半天,最后初始化搞错了还一直wa.. 题目大意: 炒股,总共 t 天,每天可以买入na[i]股,卖出nb[i]股,价钱分别为pa[i]和pb[i],最大同时拥有p股 且一次 ...

  7. 关于void*函数返回

    一. sample #include<iostream> using namespace std; void* test(void* pass) { return pass; } int ...

  8. JavaScript 数组中查找符合条件的值

    数组实例的find方法,用于找出第一个符合条件的数组成员.它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员,然后返回该成员.如果没有符合条件的成员,则返回u ...

  9. 【POJ2114】Boatherds 树分而治之

    做广告: #include <stdio.h> int main() { puts("转载请注明出处[vmurder]谢谢"); puts("网址:blog. ...

  10. 只包含schema的dll生成和引用方法

    工作中,所有的tools里有一个project是只包含若干个schema的工程,研究了一下,发现创建这种只包含schema的dll其实非常简单. 首先,在visual studio-new proje ...