AngularJS中为我们提供了一些内置的过滤器,这里列举一些自定义过滤器的场景。

自定义过滤器,不带参赛

//过滤 不带参赛
app.filter('ordinal', function () {return function (number) {if (isNaN(number) || number < 1) {return number;} else {var lastDigit = number % 10;if (lastDigit === 1) {return number + 'st'} else if (lastDigit === 2) {return number + 'nd'} else if (lastDigit === 3) {return number + 'rd'} else if (lastDigit > 3) {return number + 'th'}}}
});

大致这样使用:

{{777 | ordinal}}

过滤 带参赛

把某个位置上的字母转换成大写。

//过滤 带参赛
app.filter('capitalize', function () {//input 需要过滤的元素//char位置,索引减一return function (input, char) {if (isNaN(input)) {//如果序号位置没有设置,索引位置默认是0var char = char - 1 || 0;//把过滤元素索引位置上的字母转换成大写var letter = input.charAt(char).toUpperCase();var out = [];for (var i = 0; i < input.length; i++) {if (i == char) {out.push(letter);} else {out.push(input[i]);}}return out.join('');} else {return input;}}
});

大致这样使用:

{{'seven' | capitalize:3}}

过滤集合

过滤出集合中满足某种条件的元素。

var app = angular.module('filters', []);app.controller('demo', function ($scope) {$scope.languages = [{name: 'C#', type: 'static'},{name: 'PHP', type: 'dynamic'},{name: 'Go', type: 'static'},{name: 'JavaScript', type: 'dynamic'},{name: 'Rust', type: 'static'}];
});//过滤集合
app.filter('staticLanguage', function () {return function (input) {var out = [];angular.forEach(input, function (language) {if (language.type === 'static') {out.push(language);}});return out;}
});

大致这样使用:

<li ng-repeat="lang in languages | staticLanguage">{{lang.name}}</li>

过滤,带多个参数,做多件事

定义数字的显示单位和显示位置。

var app = angular.module('filters', []);app.controller('demo', function ($scope) {$scope.digit = 29.88;
});//过滤 做多件事 多个参赛
app.filter('customCurrency', function () {return function (input, symbol, place) {if (isNaN(input)) {return input;} else {//检查symbol是否有实参var symbol = symbol || '¥';var place = place === undefined ? true : place;if(place===true){return symbol+input;}else{return input + symbol;}}}
});

大致这样使用:

<p><strong>Original:</strong></p>
<ul><li>{{digit}}</li></ul>
<p><strong>Custom Currency Filter</strong></p>
<ul><li>{{digit | customCurrency}} --Default</li><li>{{digit | customCurrency:'元'}} --custom symbol</li><li>{{digit | customCurrency:'元':false}} -- custom symbol and custom location</li>
</ul>

转载于:https://www.cnblogs.com/darrenji/p/5081493.html

AngularJS中自定义过滤器相关推荐

  1. AngularJS中的过滤器(filter)

    AngularJS中的过滤器是用于对数据的格式化,或者筛选的函数,可以直接通过以下语法使用: {{expression|filter}} {{expression|filter1|filter2}} ...

  2. .net中自定义过滤器对Response内容进行处理

    原文:http://www.cnblogs.com/zgqys1980/archive/2008/09/02/1281895.html 代码DEMO:http://files.cnblogs.com/ ...

  3. AngularJS中自定义指令

    AngularJS中除了内置指令,还可以自定义指令.自定义指令和自定义过滤器一样,有两种方法: 第一种,在module中配置:$compileProvider.directive('directive ...

  4. AngularJS中多种过滤器的使用

    hello,everybady~~~  今天有人问我怎么使用过滤器,我就简单的做了个总结,大家一起来纠错呗~ 对于正在工作的楼主来说,也觉得当时学习Angular稍稍有点头疼,知识点很多,也挺怀念那时 ...

  5. Django中自定义过滤器的使用

    我在这里做的是: 从数据库查出id递增的一些信息,展示在前台. 编写一个过滤器判断查出数据的id是偶数的返回True 奇数返回False 1 创建项目,创建应用,注册应用,配置settings.py文 ...

  6. 关于Angularjs中自定义指令一些有价值的细节和技巧

    作者:心叶 时间:2018-04-22 10:58 一:自定义指令常用模板 下面是大致的说明,不是全面的,后面来具体说明一些没有提及的细节和重要的相关知识: angular.module('yello ...

  7. vue 项目中 自定义过滤器 全局使用 filter

    新建filter文件 src目录下新建filters目录,filters目录里新建index.js文件 exports.formatMoney = (value) => {if (value) ...

  8. angularjs创建自定义过滤器时欧元符号乱码

    myApp.filter('mycurrency', function(currencyFilter, $sce) {return function(input, country) {var euro ...

  9. php自定义能过滤器,过滤器与自定义过滤器的介绍

    angularjs中的过滤器为了实现对于表达式结果的筛选.过滤.格式化,达到更好的表现效果. 过滤器的语法:支持多重过滤和传参 {{expression | 过滤器名称 : '参数' | 过滤器名称2 ...

最新文章

  1. VC++中线程同步技术分析3
  2. Js实现回车登录,监听回车事件
  3. oracle 迁移用户信息,Oracle备份一个用户并迁移
  4. macos剪切_如何使用macOS的内置“ Kill and Yank”作为替代剪切和粘贴
  5. 如何调度spark程序_如何定时,周期性的运行程序?Python APScheduler实现任务灵活调度...
  6. 【OpenCV 例程200篇】76. OpenCV 实现图像傅里叶变换
  7. ASP.NET MVC5+EF6+EasyUI 后台管理系统(52)-美化EasyUI皮肤和图标
  8. 华为主题包hwt下载_华为主题太丑?修改方式它来了
  9. Spring Boot 在Gradle构建中使用Log4j日志
  10. 水系图一般在哪里找得到_虹吸雨水排水系统相较于传统重力排水有哪些优点?...
  11. 【初识SciPy库】
  12. 关于hping打流测试工具
  13. 苹果6s连上wifi上不了网络连接服务器未响应,6s连不上网了怎么解决
  14. 推荐算法(一)--基本介绍
  15. pageX,clientX,screenX,offsetX区别
  16. 权限管理系统(包括审批流程)数据库设计图
  17. python-opencv控制鼠标操作
  18. 大数据是什么?大数据可以做什么?大数据实际做了什么?大数据要怎么做?
  19. Redis 的info命令信息解释
  20. 【Java基础】使用swing对话框编写一个程序:输入长和宽,计算矩形的周长和面积

热门文章

  1. PaddlePaddle:在 Serverless 架构上十几行代码实现 OCR 能力
  2. 【宜搭客户说】宜搭帮助教育局搭建教育管理平台
  3. 智能技术可以帮助解决人口老龄化问题吗?
  4. 万万没想到,枯燥的“机器学习”还可以这样学!
  5. mysql ddl crash,MySQL5.6 crash-safe replication一个坑
  6. 《王者荣耀》游戏技术总监:技术架构与同步方案上做出改变?
  7. PHP面试题:请说明 PHP 中传值与传引用的区别。什么时候传值什么时候传引用?
  8. sleep 与 wait 区别
  9. TCP/IP的七层模型
  10. etc/ld.so.conf