AngularJS中自定义过滤器
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中自定义过滤器相关推荐
- AngularJS中的过滤器(filter)
AngularJS中的过滤器是用于对数据的格式化,或者筛选的函数,可以直接通过以下语法使用: {{expression|filter}} {{expression|filter1|filter2}} ...
- .net中自定义过滤器对Response内容进行处理
原文:http://www.cnblogs.com/zgqys1980/archive/2008/09/02/1281895.html 代码DEMO:http://files.cnblogs.com/ ...
- AngularJS中自定义指令
AngularJS中除了内置指令,还可以自定义指令.自定义指令和自定义过滤器一样,有两种方法: 第一种,在module中配置:$compileProvider.directive('directive ...
- AngularJS中多种过滤器的使用
hello,everybady~~~ 今天有人问我怎么使用过滤器,我就简单的做了个总结,大家一起来纠错呗~ 对于正在工作的楼主来说,也觉得当时学习Angular稍稍有点头疼,知识点很多,也挺怀念那时 ...
- Django中自定义过滤器的使用
我在这里做的是: 从数据库查出id递增的一些信息,展示在前台. 编写一个过滤器判断查出数据的id是偶数的返回True 奇数返回False 1 创建项目,创建应用,注册应用,配置settings.py文 ...
- 关于Angularjs中自定义指令一些有价值的细节和技巧
作者:心叶 时间:2018-04-22 10:58 一:自定义指令常用模板 下面是大致的说明,不是全面的,后面来具体说明一些没有提及的细节和重要的相关知识: angular.module('yello ...
- vue 项目中 自定义过滤器 全局使用 filter
新建filter文件 src目录下新建filters目录,filters目录里新建index.js文件 exports.formatMoney = (value) => {if (value) ...
- angularjs创建自定义过滤器时欧元符号乱码
myApp.filter('mycurrency', function(currencyFilter, $sce) {return function(input, country) {var euro ...
- php自定义能过滤器,过滤器与自定义过滤器的介绍
angularjs中的过滤器为了实现对于表达式结果的筛选.过滤.格式化,达到更好的表现效果. 过滤器的语法:支持多重过滤和传参 {{expression | 过滤器名称 : '参数' | 过滤器名称2 ...
最新文章
- VC++中线程同步技术分析3
- Js实现回车登录,监听回车事件
- oracle 迁移用户信息,Oracle备份一个用户并迁移
- macos剪切_如何使用macOS的内置“ Kill and Yank”作为替代剪切和粘贴
- 如何调度spark程序_如何定时,周期性的运行程序?Python APScheduler实现任务灵活调度...
- 【OpenCV 例程200篇】76. OpenCV 实现图像傅里叶变换
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(52)-美化EasyUI皮肤和图标
- 华为主题包hwt下载_华为主题太丑?修改方式它来了
- Spring Boot 在Gradle构建中使用Log4j日志
- 水系图一般在哪里找得到_虹吸雨水排水系统相较于传统重力排水有哪些优点?...
- 【初识SciPy库】
- 关于hping打流测试工具
- 苹果6s连上wifi上不了网络连接服务器未响应,6s连不上网了怎么解决
- 推荐算法(一)--基本介绍
- pageX,clientX,screenX,offsetX区别
- 权限管理系统(包括审批流程)数据库设计图
- python-opencv控制鼠标操作
- 大数据是什么?大数据可以做什么?大数据实际做了什么?大数据要怎么做?
- Redis 的info命令信息解释
- 【Java基础】使用swing对话框编写一个程序:输入长和宽,计算矩形的周长和面积
热门文章
- PaddlePaddle:在 Serverless 架构上十几行代码实现 OCR 能力
- 【宜搭客户说】宜搭帮助教育局搭建教育管理平台
- 智能技术可以帮助解决人口老龄化问题吗?
- 万万没想到,枯燥的“机器学习”还可以这样学!
- mysql ddl crash,MySQL5.6 crash-safe replication一个坑
- 《王者荣耀》游戏技术总监:技术架构与同步方案上做出改变?
- PHP面试题:请说明 PHP 中传值与传引用的区别。什么时候传值什么时候传引用?
- sleep 与 wait 区别
- TCP/IP的七层模型
- etc/ld.so.conf