一、内置过滤器
1、大小写转换:
uppercase、lowercase
{{"lower cap string"| uppercase }} {{"Tank Is GOOD"| lowercase}} ?
2、json格式化(将对象转换成json字符串),默认输出就是json字符串:
???{{ {name:‘zhangsan‘,age:15} }} ?????{{ {name:‘zhangsan‘,age:15}|json }} ?
3、number格式化:
???{{1.2345|number:1}} ? // 1.2 ???{{1.2345|number:3}} ? // 1.235 ???{{1234567|number}} ? // 1,234,567
4、currecy货币格式化:
???{{500|currency}} ? // $500.00 ???{{250|currency:‘RMB ¥ ‘}} ? // RMB ¥ 250.00
5、date格式化:
???var app = angular.module(‘myApp‘, []); ?????app.controller(‘myCtrl‘, function ($scope) { ?????????$scope.dateOne = new Date(); ?????????console.info(new Date().toJSON()); ?????????$scope.dateTwo = new Date().toJSON(); ?????????// /Date(1464941268937)/ ?????????$scope.dateThree = ‘1464941268937‘; ?????}); ?
???{{ 1304375948024 |date}} ? // May 3, 2011 ???{{ dateOne |date:‘hh:mm:ss‘}} ? // 09:19:20 ???{{ dateTwo |date:‘yyyy-MM-dd hh:mm:ss‘}} ? // 2017-09-19 09:19:20 ???{{ dateThree |date:‘yyyy年MM月dd日‘}} ? // 2016年06月03日
6、filter查找:
???//查找含有有4的行 ?????{{ [{"age": 20,"id": 10,"name": "iphone"}, ?????{"age": 12,"id": 11,"name": "sunm xing"}, ?????{"age": 44,"id": 12,"name": "test abc"}] ??????| filter:‘4‘ }} ?????//查找name含有iphone的行 ?????{{ [{"age": 20,"id": 10,"name": "iphone"}, ?????{"age": 12,"id": 11,"name": "sunm xing"}, ?????{"age": 44,"id": 12,"name": "test abc"}] ??????| filter:{‘name‘:‘iphone‘} }} ?
???//查找含有有4的行 ????[{"age":44,"id":12,"name":"test abc"}] ????//查找name含有iphone的行 ????[{"age":20,"id":10,"name":"iphone"}]
7、limitTo 字符串或对象的截取:
???{{‘i want you‘| limitTo:3}} ? // i w ???{{‘i want you‘| limitTo:-3}} ? // you ???{{[1,3,5]|limitTo:1}} ? // [1] ????{{[1,3,5]|limitTo:-1}} ? // [5]
8、orderBy 对象排序:
???//根据id降序排 ?????????{{ [{"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降序排 ????[{"age":44,"id":12,"name":"test abc"},{"age":12,"id":11,"name":"sunm xing"},{"age":20,"id":10,"name":"iphone"}] ???//根据id升序排 ????[{"age":20,"id":10,"name":"iphone"},{"age":12,"id":11,"name":"sunm xing"},{"age":44,"id":12,"name":"test abc"}]
二、自定义过滤器
???var app = angular.module(‘myApp‘, []); ???app.controller(‘myCtrl‘, function($scope) { ???????$scope.msg = "Runoob"; ???}); ???app.filter(‘reverse‘, function() { //可以注入依赖 ???????return function(text) { ???????????return text.split("").reverse().join(""); ???????} ???});
AngularJS 之 过滤器 Filter
原文地址:http://www.cnblogs.com/likwin/p/7554278.html