转载 angularJS filter 过滤器
源文地址:http://www.ncloud.hk/技术分享/angularjs中的filter-过滤器/
filters可以用来格式化数据。例如把时间格式化成为yyyy-MM-dd的形式来呈现给用户,方便查看。AngularJS内置了一些filters,我们也可以根据自己的需要自定义一些filters.
下面是angularjs提供的filters:
currency:格式化一个数字成为一种货币。当没有提供任何货币符号时,使用当前区域的默认符号。
number:格式化数字成为文本
filter:从数组中选择一个子集,并将其返回为一个新数组
date:基于要求的格式格式化日期为字符串
json:允许你将一个JavaScript对象转化为JSON字符串
lowercase:转换字符串成为小写
uppercase:转换字符串成为大写
limitTo:将数组/字符串限定为一个指定的元素/字符数。
orderBy:通过给定的表达式指定数组,它是按字母顺序排列的字符串和数值。
用法介绍:
html中用法:
filter可以用管道符 | 添加到表达式:{{expression | filter}}
也可以多个filter连用,上一个filter的输出作为下一个filter的输出:
{{expression | filter1 | filter2 |……}}
还可以在指令中用参数:
例如: <li ng-repeat=“x in names | orderBy:’country’”>
或<li ng-repeat=“x in names | filter : ‘i’>
javascript中用法:
例:$scope.formatDate = $filter('date')(today, 'yyyy-MM-dd');
{{事件戳 | data:"yyyy-mm-dd"}} 格式化为 年月日 格式
有时候angularjs内置的filter不够用,我们就可以自己定义一个过滤器。
例如定义一个名为“myFormat”的过滤器,
<ul ng-app="myApp"ng-controller="namesCtrl">
<li ng-repeat="x in names">
{{x | myFormat}}
</li>
</ul>
<script>
var app = angular.module('myApp', []);
app.filter('myFormat', function() {
returnfunction(x) {
var i, c, txt = "";
x = x.split("")
for (i = 0; i < x.length; i++) {
c = x[i];
if (i % 2 == 0) {
c = c.toUpperCase();
}
txt += c;
}
return txt;
};
});
app.controller('namesCtrl', function($scope) {
$scope.names = ['Jani', 'Carl', 'Margareth', 'Hege', 'Joe', 'Gustav', 'Birgit','Mary', 'Kai'];
});
</script>
这个myFormat过滤器将会格式化其它奇数位的字符为大写。
转载 angularJS filter 过滤器的更多相关文章
- AngularJs filter 过滤器
Filter Ng里的过滤器. currency:把一个数字格式化成货币模式(如$1,234.56).当没有提供任何货币符号时,默认使用当前区域的符号. 使用: HTML:{{ currency_ex ...
- AngularJs filter 过滤器基础【转】
Filter Ng里的过滤器. currency:把一个数字格式化成货币模式(如$1,234.56).当没有提供任何货币符号时,默认使用当前区域的符号. 使用: HTML:{{ currency_ex ...
- AngularJS学习--- 过滤器(filter),格式化要显示的数据 step 9
1.切换目录,启动项目 git checkout step- npm start 2.需求: 格式化要显示的数据. 比如要将true-->yes,false-->no,这样相互替换. 3. ...
- AngularJs(八) 过滤器filter创建
大纲 示例 过滤器的使用 创建过滤器 demo 这是整个示例demo 1.filter.js文件 angular.module("exampleApp", []) .constan ...
- angularjs学习第三天笔记(过滤器第二篇---filter过滤器及其自定义过滤器)
您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指正,多多包涵我这个前端菜鸟,欢迎大家的点 ...
- AngularJS:过滤器
ylbtech-AngularJS:过滤器 1.返回顶部 1. AngularJS 过滤器 过滤器可以使用一个管道字符(|)添加到表达式和指令中. AngularJS 过滤器 AngularJS 过滤 ...
- AngularJS开发指南13:AngularJS的过滤器详解
AngularJS过滤器是用来格式化输出数据的.除了格式化数据,过滤器还能修改DOM.这使得过滤器通常用来做些如“适时的给输出加入CSS样式”等工作. 比如,你可能有些数据在输出之前需要根据进行本地化 ...
- 转:java使用Filter过滤器对Response返回值进行修改
练习时只做了对request 的处理,这里记录一下,filter 对 response的处理. 原文地址:java使用Filter过滤器对Response返回值进行修改 有时候在开发过程中会有这样一个 ...
- AngularJS之过滤器
AnularJS的过滤器用来格式化需要展示给用户的数据,有很多实用的内置过滤器,也可以自己编写. 在HTML中的模板绑定符号{{ }}内通过|符号来调用过滤器.例如,假设我们希望将字符串转换成大写,可 ...
随机推荐
- schedule of 2016-09-19~2016-09-25(Monday~Sunday)——1st semester of 2nd Grade
2016/9/19 Monday 1.make ppt for today's group meeting 2.recite 100 words 3.review <图解机器学习>ch1~ ...
- cesium加载WFS服务(GeoServer发布)
需求: 为了便于前端渲染数据,自定义图层渲染. 思路: 获取地图服务中的要素进行渲染. 工具: GeoServer 2.6.4,cesium, 思路有了就开始找资料写代码,cesium有接口可以加载W ...
- 使用java做一个能赚钱的微信群聊机器人(2020年基于PC端协议最新可用版)
前言 微信群机器人,主要用来管理群聊,提供类似天气查询.点歌.机器人聊天等用途. 由于微信将web端的协议封杀后,很多基于http协议的群聊机器人都失效了,所以这里使用基于PC端协议的插件来实现. 声 ...
- java实现阿里云短信服务发送验证码
由于做项目的时候遇到了接第三方短信服务,所以记录一下. 一.新建一个maven项目并导入相关依赖 <!--手机发送短信验证码--> <dependency> <group ...
- 斯坦福算法分析和设计_2. 排序算法MergeSort
Motivate MergeSort是个相对古老的算法了,为什么现在我们还要讨论这么古老的东西呢?有几个原因: 它虽然年龄很大了,但是在实践中一直被沿用,仍然是很多程序库中的标准算法之一. 实现它 ...
- 网络流学习 - dinic
推荐博客:https://www.cnblogs.com/SYCstudio/p/7260613.html#4246029
- Qt Installer Framework翻译(5-0)
创建安装程序 创建离线和在线安装程序,需要执行以下步骤: 为可安装组件创建一个package文件夹.有关更多信息,请参见包文件夹章节. 在config文件夹中创建一个名为config.xml的配置文件 ...
- 国产CPU 申威1621 异数OS基础组件理论性能测试报告
国产CPU 申威1621 异数OS基础组件理论性能测试报告 文章目录 国产CPU 申威1621 异数OS基础组件理论性能测试报告 前言 测试平台 测试项目 SW1621 异数OS 容器虚拟交换机模拟性 ...
- (分块)GukiZ and GukiZiana CodeForces - 551E
题意: 给你一段序列,并且有两种操作 操作①:将序列中从l-r每个元素加上x 操作②:在序列中找到ai=aj=y,j-i的最大值,如果找不到则输出-1 思路: 直接分块暴力即可 对于区间加,普通标记加 ...
- Hystrix 监控数据聚合 Turbine【Finchley 版】
原文地址:https://windmt.com/2018/04/17/spring-cloud-6-turbine/ 上一篇我们介绍了使用 Hystrix Dashboard 来展示 Hystrix ...