SoFunction
Updated on 2025-04-04

Common filters for AngularJs

date formatting

{{ 1304375948024 | date }}       //Result: May 3, 2011{{ 1304375948024 | date:"MM/dd/yyyy @ h:mma" }}  //Result: 05/03/2011 @ 6:39AM{{ 1304375948024 | date:"yyyy-MM-dd hh:mm:ss" }} //result:2011-05-03 06:39:08

Number Format

{{ 1.234567 | number:1 }} //Result: 1.2{{ 1234567 | number }}  //result:1,234,567

currency currency formatting

{{ 250 | currency }}     //Result: $250.00{{ 250 | currency:"RMB ¥ " }}  //result:RMB ¥ 250.00

filter search

{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | filter:'s'}} //Find rows with s 
//The result of the above example: [{"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'} }} //Find the line with name as iphone 
//The above example results:[{"age":20,"id":10,"name":"iphone"}] 

orderBy object sorting

{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | orderBy:'id':true }}  //Root id descending order 
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | orderBy:'id' }}   //according toidAscending order

limitTo string, object intercept

{{ "i love tank" | limitTo:6 }}   //Result: i love{{ "i love tank" | limitTo:-4 }}   //Result: tank 
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | limitTo:1 }}  //result:[{"age":20,"id":10,"name":"iphone"}]

Convenient for yourself and others.

The above is all the content of this article. I hope that the content of this article will help you study or work. I also hope to support me more!