Angularjs filter过滤器以及自定义filter过滤器
来源:互联网 发布:烟台华商网络怎么样 编辑:程序博客网 时间:2024/04/30 07:19
Angularjs filter过滤器
uppercase,lowercase大小转换
{{ "lower cap string" | uppercase }} //结果:LOWER CAP STRING
{{ "TANK is GOOD" | lowercase }} //结果:tank is good
json格式化
{{ {foo: "bar", baz: 23} | json }} //结果:{ "foo": "bar", "baz": 23 }
date格式化
{{ 1304375948024 | date }} //结果:May 3, 2011
{{ 1304375948024 | date:"MM/dd/yyyy @ h:mma" }} //结果:05/03/2011 @ 6:39AM
{{ 1304375948024 | date:"yyyy-MM-dd hh:mm:ss" }} //结果:2011-05-03 06:39:08
number格式化
{{ 1.234567 | number:1 }} //结果:1.2
{{ 1234567 | number }} //结果:1,234,567
currency货币格式化
{{ 250 | currency }} //结果:$250.00
{{ 250 | currency:"RMB ¥ " }} //结果:RMB ¥ 250.00
filter查找
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | filter:'s'}} //查找含有有s的行
//上例结果:[{"age":12,"id":11,"name":"sunm xing"},{"age":44,"id":12,"name":"test abc"}]
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | filter:{'name':'iphone'} }} //查找name为iphone的行
//上例结果:[{"age":20,"id":10,"name":"iphone"}]
limitTo字符串,对像的截取
{{ "i love tank" | limitTo:6 }} //结果:i love
{{ "i love tank" | limitTo:-4 }} //结果:tank
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | limitTo:1 }} //结果:[{"age":20,"id":10,"name":"iphone"}]
orderBy对像排序
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | orderBy:'id':true }} //根id降序排
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | orderBy:'id' }} //根据id升序排
控制器使用 filter
$scope.name = $filter('date')('236478234','hh');
$scope.name = $filter('uppercase')('hello');
Angularjs自定义filter过滤器
filters.js添加一个module
查看复制打印?
angular.module('tanktest', []).filter('tankreplace', function() {
return function(input) {
return input.replace(/tank/, "=====")
};
});
2.app.js中加载这个module
查看复制打印?
var phonecatApp = angular.module('phonecatApp', [
'ngRoute',
'phonecatControllers',
'facebookControllers',
'tanktest'
]);
3.html中调用
查看复制打印?
{{ "TANK is GOOD" | lowercase |tankreplace}} //结果:===== is good
注意:| lowercase |tankreplace管道命令可以有多个
源引:http://www.phonegap100.com/article-409-1.html
- Angularjs filter过滤器以及自定义filter过滤器
- AngularJS 过滤器\自定义过滤器 $filter
- 《AngularJs》$filter 自定义过滤器
- angularJS filter自定义过滤器
- angularJs-----$filter过滤器使用 自定义过滤器
- angularJs-----$filter过滤器使用 自定义过滤器
- AngularJs基础——过滤器filter及自定义过滤器filter
- AngularJs 过滤器(filter)
- AngularJs过滤器(filter)
- angularjs学习 过滤器(filter)
- angularjs中的filter(过滤器)
- angularjs过滤器(filter)
- AngularJS Filter过滤器详情
- angularjs filter 详解(过滤器)
- AngularJs 过滤器(filter)
- angularJS-filter过滤器
- angularjs之filter过滤器
- AngularJs filter 过滤器
- poj 1195 树状数组
- c++ 学习之路 位操作
- 《从零开始学Swift》学习笔记(Day 15)——请注意数字类型之间的转换
- PHP中include和require的区别详解
- 自定义日历的时间选着
- Angularjs filter过滤器以及自定义filter过滤器
- Gson 优雅实现多个枚举的自定义(反)序列化过程
- bzoj 4254 树形dp
- Sequelize和MySQL对照 【翻译】
- 题目:输入一棵二叉树的根结点,判断该树是不是平衡二叉树
- 23、H5新增js属性之本地存储
- 对java的Hash方法的一些分析总结
- WebDriver参考资料
- 根据前序遍历中序遍历求二叉树