angularJS过滤器

filter

currency

date

filter

json

limitTo

lowercase

number

orderBy

uppercase

......

Filter过滤器

过滤器的主要用途就是一个格式化 / 筛选数据的小工具;

一般用于服务端存储的数据转换为用户界面可以理解的数据;

常见需要使用Filter的数据有:

- 时间 1288323623006

currency:它是用来过滤货币
作用把数字过滤成 一个货币:
使用:竖杠+过滤器名称
<div ng-app=>
<h1>{{20000 | currency}}</h1>
</div>
//效果:$20,000.00

没有多少意义,国际标准货币,对我们不实用;

date :转化为时间

<div ng-app=>
<h1>{{1288323623006 | date}}</h1>//效果 Oct 29, 2010
<h1>{{1288323623006 | date:'yyyy-MM-dd HH:mm:ss'}}</h1>//效果 2010-10-29 11:40:23
// 这里是英文的
可以使用 angular-locale_zh-cn.js 来进行汉化
</div>

json过滤器

<div ng-app="myApp" ng-controller="myAppController">
{{jsonDate}}<br>
{{jsonDate | json}}
</div>
<script type="text/javascript">
var myApp = angular.module('myApp',[]);
myApp.controller('myAppController',['$scope',function($scope){
$scope.jsonDate = {
zifuchuan:'张三',
shuzi:19,
bool:false,
json:{name:'老王',age:18},
shuzu:[{name:'老王',age:'18'},{name:'老王',age:'18'}]
};
}]);
</script>

limitTo过滤器:限制到:

作用:用来控制字符串展示多少长度;

<div ng-app>{{'www.baidu.com,baidu.com' | limitTo:10}}</div>
//www.baidu.

具体语法:

{{limiTo_expression | limitTo:limit:begin}}

limit是必选项,begin是可选项;

number过滤器: 格式化(保留小数)这里会进行四舍五入

<div ng-app>{{1459824.1542558 | number:2}}</div>
// 效果:1,459,824.15

接下来的过滤器,在使用过程中在做阐述;

angularJS的过滤器!的更多相关文章

  1. AngularJS学习--- 过滤器(filter),格式化要显示的数据 step 9

    1.切换目录,启动项目 git checkout step- npm start 2.需求: 格式化要显示的数据. 比如要将true-->yes,false-->no,这样相互替换. 3. ...

  2. AngularJS开发指南13:AngularJS的过滤器详解

    AngularJS过滤器是用来格式化输出数据的.除了格式化数据,过滤器还能修改DOM.这使得过滤器通常用来做些如“适时的给输出加入CSS样式”等工作. 比如,你可能有些数据在输出之前需要根据进行本地化 ...

  3. 走进AngularJs(七) 过滤器(filter) - 吕大豹

    时间 2013-12-15 16:22:00  博客园-原创精华区 原文  http://www.cnblogs.com/lvdabao/p/3475426.html 主题 AngularJS 过滤器 ...

  4. AngularJs(八) 过滤器filter创建

    大纲 示例 过滤器的使用 创建过滤器 demo 这是整个示例demo 1.filter.js文件 angular.module("exampleApp", []) .constan ...

  5. 创建 AngularJS 自定义过滤器,带自定义参数

    Angularjs过滤器是 angularjs非常棒的特性之一.有朝一日,你可能需要使用自定义过滤器,幸运的是,你找到了这篇博文. 下面显示的是自定义过滤器长什么样子(请注意myfilter): &l ...

  6. AngularJs自定义过滤器filter

    AngularJs自带有很多过滤器,现在Insus.NET演示一个自定义的过滤器,如实现一个数据的平方. 本演示是在ASP.NET MVC环境中进行. 创建一个app: 创建一个控制器: 接下来是重点 ...

  7. AngularJS之过滤器

    AnularJS的过滤器用来格式化需要展示给用户的数据,有很多实用的内置过滤器,也可以自己编写. 在HTML中的模板绑定符号{{ }}内通过|符号来调用过滤器.例如,假设我们希望将字符串转换成大写,可 ...

  8. AngularJS:过滤器

    ylbtech-AngularJS:过滤器 1.返回顶部 1. AngularJS 过滤器 过滤器可以使用一个管道字符(|)添加到表达式和指令中. AngularJS 过滤器 AngularJS 过滤 ...

  9. AngularJS 五 过滤器及验证

    AngularJS过滤: AngularJS过滤器允许我们格式化数据以在UI上显示而不改变原始格式. 格式: 一些比较重要的过滤器: Number               Filter       ...

随机推荐

  1. Convolutional Neural Networks on Graphs with Fast Localized Spectral Filtering

    Defferrard, Michaël, Xavier Bresson, and Pierre Vandergheynst. "Convolutional neural networks o ...

  2. 正则表达式”\d+\.?\d*”在匹配下列字符串时结果是失败的是?

    A 12.5 B 1.25 C 以上都成功 D 以上都失败 解答:B \d+ 表示可以出现1次或是n次数字 \. .? 表示可以“.”可以出现一次,也可以不出现 \d* 表示可以出现0次或是n次数字

  3. 在windows下编译x264

    最近因为各种原因,对流媒体的学习,突然中断在了编码这块.今天难得静下心来,从新拿起了代码. 对encode这边,因为之前虽然也接触了,也找了两个例子,但目前还没真正开始,所以先从编译x264这个库开始 ...

  4. taskAffinity属性

    Activity的归属,也就是Activity应该在哪个Task中,Activity与Task的吸附关系.我们知道,一般情况下在同一个应用中,启动的Activity都在同一个Task中,它们在该Tas ...

  5. R语言低级绘图函数-axis

    axis函数用来在一张图表上添加轴线,区别于传统的x轴和y轴,axis 允许在上,下,左, 右4个方向添加轴线 以x轴为例,一条轴线包含3个元素,水平的一条横线,叫做axis line , 刻度线, ...

  6. CentOS6.8设置开机直接进入命令行模式

    在linux图形界面中,按 “Alt+Ctrl+F1”,进入命令行界面. 切换到root用户 # vi /etc/inittab 找到下面的语句: # Default runlevel. The ru ...

  7. Cookie示例

    //caozuocookie        var webusername = "";        function getCookie(name){ var arr,reg=n ...

  8. OpenCV学习:改变图像的对比度和亮度

    本实例演示简单地改变图像的对比度和亮度,使用了如下线性变换来实现像素值的遍历操作: The parameters α > 0 and β often called the gain and bi ...

  9. 合格前端系列第六弹-从指向看JavaScript

    https://my.oschina.net/qiangdada/blog/1484001

  10. 工作流JBPM_day01:7-使用流程变量

    工作流JBPM_day01:7-使用流程变量 工作流就像流水线 对应数据库中的一张表 ProcessVariableTest.Java import java.util.List; import or ...