angular自定义filter

angular自定义filter

angular除了几个自带的常用的filter,还可以自定义filter,以满足不同的需求,简单研究了一下自定义filter,记录一下。

有如下场景,后台返回的数据中,status可能是英文字符串,如果在html中使用if进行挨个判断,则显得有些啰嗦,这样我们就可以使用自定义的filter实现

javasc代码:

     var myapp = angular.module(‘demoApp‘, []);
     myapp.controller(‘filterController‘,[‘$scope‘,function($scope){
        $scope._status= [‘ENABLE‘,‘DISABLED‘,‘BINDING‘];
     }]);
     myapp.filter(‘statusFilter‘,function(){
        return function(input){
            if(input === ‘ENABLE‘) return ‘启用‘;
            if(input === ‘DISABLED‘) return ‘停用‘;
            if(input === ‘BINDING‘) return ‘绑定‘;
        }
     });

html代码:

<p ng-repeat="status in _status" >{{status | statusFilter}}</p>

在controller中我们定义了一个数组_status,用来模拟后台返回的数据,我们在前台显示的时候可能不希望直接显示为英文的,客户看不懂啊。。。 如果在html中使用ng-if进行判断然后再显示,会显得有些啰嗦。我们直接写一个简单的filter,专门对status这个字段进行过滤即可。

时间: 2024-11-05 12:28:31

angular自定义filter的相关文章

angular中filter的使用

1.直接在html中使用filter,过滤特定的字符 例如: <div ng-repeat="name in nameList | filter:'张朋'">{{name}}</div> //nameList 为["王三","张朋","李二"],过滤含有"张鹏"的项 2.自定义filter <!DOCTYPE html> <html lang="en&qu

Angular自定义指令(directive)

angular自定义指令,意我们可以通过angula自己定义指令,来实现我们的特殊要求,为所欲为,一支穿云箭,千军万马来相见 多少年的老规矩了,先看代码: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content=&quo

Atitit.struts排除url&#160;的设计and&#160;原理&#160;自定义filter&#160;排除特定url

Atitit.struts排除url 的设计and 原理 自定义filter 排除特定url 1.1. 原理流程1 2. Invoke1 3. StrutsX2 1.1. 原理流程 读取struts配置xml文件内容 得到多个regexpress规则,匹配规则与uri <constant name="struts.action.excludePattern" value="/com.attilax/core/approot_js.jsp,.*\.jsp,/api.jsp

angular 自定义指令详解 Directive

在angular中,Directive,自定义指令的学习,可以更好的理解angular指令的原理,当angular的指令不能满足你的需求的时候,嘿嘿,你就可以来看看这篇文章,自定义自己的指令,可以满足你的各种需求的指令. 本篇文章的参考来自  AngularJS权威指南 , 文章中主要介绍指令定义的选项配置 废话不多说,下面就直接上代码 //angular指令的定义,myDirective ,使用驼峰命名法 angular.module('myApp', []) .directive('myDi

关于angular 自定义directive

关于angular 自定义directive的小结 首先我们创建一个名为"expander"的自定义directive指令: angular.module("myApp",[]).directive("expander",function(){ return{ //directive的一些属性(键值对形式)如下: /* restrict:'EA', replace:true, transclude:true, scope:{...}, templ

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

自定义Filter的基本思路是继承基类ActionFilterAttribute,并根据实际需要重写OnActionExecuting,OnActionExecuted,OnResultExecuting,OnResultExecuted这四个中的一个或多个方法. 注意类名一定要以Attribute结尾. 故名思义,Action执行前,执行后,结果返回前,结果返回后.所以它们的执行先后顺序就是OnActionExecuting,OnActionExecuted,Action,OnResultEx

DirectX:在graph自动连线中加入自定义filter

为客户提供的视频播放的filter的测试程序中,采用正向手动连接的方式(http://blog.csdn.net/mao0514/article/details/40535791),由于不同的视频压缩格式,导致这种方式的缺点是不能及时的播放任意的视频文件.现在,采用在自动连线的graph中添加自己的filter: 过程如下: 1. 构建自动连线graph: 2. 在graph中查找render filter: 3.在renderf ilter上查找输入m_r_in_pin的上位连接m_n_out

Spring-Security 自定义Filter完成验证码校验

Spring-Security的功能主要是由一堆Filter构成过滤器链来实现,每个Filter都会完成自己的一部分工作.我今天要做的是对UsernamePasswordAuthenticationFilter进行扩展,新增一个Filter,完成对登录页面的校验码的验证.下面先给一张过滤器的说明,接下来讲自定义的登录验证Filter.  https://docs.spring.io/spring-security/site/docs/3.2.8.RELEASE/reference/htmlsin

Python学习(三十七)—— 模板语言之自定义filter和中间件

一.模板语言之自定义filter 自定义filter文件存放位置 模板中自定义函数 - 在已注册的app中创建一个名字叫 templatetags 文件夹 - 任意创建一个py文件 - 创建名字交 register 的Library类的对象 - 定义函数 from django.template import Library register = Library() # 调用示例:{{ "a1"|meikai:"n1,n2"}} # 参数最多2 # 可以做if的条件