Angular JS Filter

Filter:

Filters are used to format data that needs to be presented to the user. Angularjs has a lot of useful built-in filters, and you can create filters yourself.

You can use filters: Front is data, followed by format
{{name | uppercase}}

Filters can be called through $filter,

App.controller (' Democontroller ', [' $scope ', ' $filter ', function ($scope, $filter) {$scope. Name = $filter (' lowercase ')　　　　) (' Ari '); Use lowercase filters to convert Ari to  Ari}]);

The value filter can limit the number of digits after the decimal point, {{123.456789 | number:2}}//display: 123.46 canwith |symbol as a delimiter using multiple filters at the same time，

Built-in filters provided by Angularjs:
The Currecy filter can format a numeric value as a currency format. {{123 | currency}}//display: $123.00Date filters can format dates as needed: {{today | date: ' Mediumtime '}}//12:09:02 PM {today | date: ' Shorttime '}}//12:0 9 PM?         Year format four-bit year: {{today | date: ' YYYY '}}//20,132-bit year: {{today | date: ' YY '}}//131-bit year: {{today | date: ' Y '}} 2013?              Month formatting English month: {{today | date: ' MMMM '}}//August English Month: {{today | date: ' MMM '}//For the month: {{today |date: ' MM '}} Month of the year 81: {{Today |date: ' M '}}//8? Date format Numeric Date: {{today|date: ' DD '}}//91 months of the day: {{today | date: ' d '}}//9 English week: {{today | date: ' EEEE '}}//Thursday | Text Week shorthand: {today | date: ' EEE '}}//Thu? Hours formatted 24-hour digital hours: {{today|date: ' hh '}}//00 hours of the day: {{today|date: ' H '}}//012-hour Digital Hour: {{today|date: ' hh '}}// 12 hours of the morning or afternoon: {{today|date: ' H '}}//12? Minutes formatted number of minutes: {{Today | date: ' mm '}}//91 hours in the first minute: {{today | date: ' m '}}/ /9 ? Seconds to format number of seconds: {{today | date: ' SS '}}//21 minutes: {{Today | date: ' s '}}//2 milliseconds: {{today | date: '. SSS '}}// .995 character formatting on PM ID: {{today | date: ' A '}}//AM four-bit time zone ID: {{today | date: ' Z '}}//0700
Here are some examples of custom date formats: {Today | date: ' MMMD, y '}}//Aug9, 2013{{today | Date: ' eeee, D, M '}}//Thursday, 9, 8{{today | Date: ' Hh:mm:ss.sss '}}//12:09:02.995 filter  filters can select a subset from a given array and generate a new array the first parameter to return the filter is a string, Object or a function to select an element from the array. The following sub-conditions introduce the different types of parameters passed in.　　The string returns all elements that contain the string. If we want to return an element that does not contain the string, add it before the argument!     Symbol.

The properties of the object to be filtered are compared with the property of the same name in the object, and if the property value is a string, it is judged to contain the string. If we want to compare all properties, we can use $ as the key name.

{{' name ': ' Ari ', ' City ': ' San Francisco ', ' favorite food ': ' Pizza '},

? The function executes this function on each element, and the element that returns a non-false value appears in the new array and is returned.
 
{[' Ari ', ' likes ', ' to ', ' travel '] | filter:iscapitalized}}//["Ari"]
$scope. iscapitalized = function(str) {return str[0] = = Str[0].touppercase (); };


Sort the following object array with the Name field:
{{' name ': ' Ari ', ' status ': ' Awake ' },
{' name ': ' Q ', ' status ': ' Sleeping ' },
{' name ': ' Nate ', ' status ': ' Awake ' }] | By: ' Name '} }
　　

<!-- [{"Name": "Ari", "status": "Awake"}, {"Name": "Nate", "status": "Awake"}, {"Name": "Q", "status": " Sleeping "}] --

You can also reverse the sort results. For example, you can reverse the sort result by setting the second argument to true:

{{' name ': ' Ari ', ' status ': ' Awake ' },
{' name ': ' Q ', ' status ': ' Sleeping ' },
{' name ': ' Nate ', ' status ': ' Awake ' }] | By: ' Name ': True }}

<!-- [{"Name": "Q", "status": "Sleeping"}, {"Name": "Nate", "status": "Awake"}, {"Name": "Ari", "status ":" Awake "}]               -- 

Custom filters:

Capitalize the first letter of a string:

Angular.module (' app ', [])        . Filter (' Capitalize ', function() {            return function(input) {                // Input is the string we passed in                if (input) {                    return input[0].touppercase () + input.slice (1);}}        ); 

If you want to convert the first letter of a sentence to uppercase, you can use the filter to convert the entire sentence to lowercase, then the first letter to uppercase:
{' Ginger loves dog treats ' | lowercase | capitalize}}

Angular JS Filter