ANGULARJS filter (self-contained and self-built) detailed _angularjs

Filters are used to format data that needs to be displayed to the user. Angularjs has a lot of practical built-in filters, but also
It's a convenient way to create your own filters.

The filter is invoked within the template binding symbol {{}} in HTML through the | symbol. For example: {{value|lowercase}}//converts a value to lowercase

Filters can be invoked through $filter in JavaScript code

Cases:

App.controller (' Democontroller ', [' $scope ', ' $filter ',
function ($scope, $filter) {
$scope. Name = $filter ('　　Lowercase ') (' Ruby ');
}]);

When using a filter as HTML, if you need to pass a parameter to the filter, just add a colon to the filter name
Can. If you have more than one argument, you can add a colon after each parameter.

For example

{{0.23145|number:3}}}

Display value: 0.231//numeric filters can limit the number of digits after the decimal point (2 after the filter, and 2 as a parameter to the filter)

You can use the | symbol as a delimiter to work with multiple filters at the same time

One: The built-in filters provided by ANGULARJS are described below:

A 1.currecy filter can format a number in currency format. Use {{50| currency}} to convert 50 to currency format.
The Currecy filter allows us to set the currency symbol ourselves. By default, the currency symbol for the area where the client is in is used.
However, you can also customize the currency symbol.

The 2.date filter formats the date into the format you want. Several date formats are built into the ANGULARJS, if not

Specifies that any format is used, by default, in mediumdate format

The following is a built-in date format that supports localization:

{{Today | date: ' Medium '} <!--Aug, 2013 12:09:02 PM-->
{{Today |-date: ' Short '}} <!--8/9/1312:09pm-->
{{Today | date: ' Fulldate '}} <!--Thursday, August, 2013-->
{{Today | date: ' Longdate '}} <!--August, 2013-->
{{Today | date: ' mediumdate '}}<!--Aug, 2013-->
{{Today | date: ' ShortDate '}} <!--8/9/13-->
{{Today | date: ' mediumtime '}}<!--12:09:02 PM-->
{{Today | date: ' Shorttime '}} <!--12:09 PM-->

Year format

Four-bit year: {today | date: ' YYYY '}} <!--2013-->
Two-bit year: {today | date: ' YY '}} <!---->
One year: {{today | date: ' Y '}} <!--2013-->

Month format

English Month: {{today | date: ' MMMM '}} <!--August-->
English month abbreviation: {{today | date: ' MMM '}} <!--Aug-->
Number month: {{today |date: ' MM '}} <!---->
The first months of the year: {{today |date: ' M '}} <!--8-->

Date formatting

Number Date: {{today|date: ' DD '}} <!---->

Day of the one month: {{today | date: ' d '}} <!--9-->

English week: {{today | date: ' EEEE '}} <!--Thursday-->
English Week shorthand: {{today | date: ' EEE '}} <!--Thu-->

Hour format

24-hour Digital hour: {{today|date: ' HH '}} <!--00-->
The first hours of the day: {{today|date: ' H '}} <!--0-->
12-hour Digital hour: {{today|date: ' hh '}} <!--12-->
Hours of the morning or afternoon: {{today|date: ' H '}} <!--12-->

Minute formatting

Number of minutes: {{Today | date: ' mm '}} <!---->
First minutes of one hours: {{Today | date: ' m '}} <!--9-->

Number of seconds formatted

Number of seconds: {{today | date: ' SS '}} <!---->
First seconds in a minute: {{today | date: ' s '} <!--2-->
Number of milliseconds: {{today |: '. SSS '}} <!--. 995-->

Character formatting

Last Afternoon Logo: {{today | date: ' A '}} <!--AM-->
Four-bit time zone ID: {{today | date: ' Z '}} <!---0700-->

Custom Date Format Example:

{{Today | date: ' MMMD, y '}} <!--Aug9, 2013-->
{{Today | date: ' eeee, D, M '}} <!--Thursday, 9, 8-->
{{Today | date: ' HH:MM:SS.SSS '}} <!--12:09:02.995-->

3.filter

The filter filter can select a subset from a given array and generate a new array to return it. This filter is often used to filter the elements that need to be displayed.

The first parameter of this filter can be a string, an object, or a function to select an element from an array.

1 when the argument passed is a string

Returns all the elements that contain this string. If we want to return an element that does not contain the string, add the! symbol before the argument.

Cases:

{[' Bri ', ' Lerner ', ' likes ', ' to ', ' Eat ', ' Pizza '] | filter: ' E '}}

<!--["Lerner", "likes", "Eat"]-->

2 The parameters passed in are the objects

Angularjs compares the properties of the object being filtered to that of the same name in this object, and if the property value is a string, it determines whether the string is included. If we want to compare all the properties, we can use $ as the key name.

Cases:

{{
' name ': ' Ari ', ' City
': ' San Francisco ',
' favorite food ': ' Pizza '
},{
' Name ': ' Nate ', ' City
': ' San Francisco ',
' favorite food ': ' Indian food '
} | filter:{' Favorite Food ': ' Pizza '}}
<!--[{' Name ': ' Ari ', ' City ': ' SanFrancisco ', ' favoritefood ': ' Pizza '}]-->

3) function

This function is executed for each element, and the element that returns the non false value appears in the new array and returns.

Custom functions for filtering (in this case the function is defined on the $scope):

{[' Ari ', ' likes ', ' to ', ' travel '] | filter:iscapitalized}}

<!--[Ari]-->
 The function of the iscapitalized function is to return TRUE or false based on whether the first letter is uppercase, as follows:
 $scope. iscapitalized = function ( STR) {return
 str[0] = = Str[0].touppercase ();
 };

4.json

The JSON filter converts a JSON or JavaScript object to a string. This conversion is very helpful for debugging:
{{' name ': ' Ari ', ' City ': ' SanFrancisco '} | json}}
<!--
{
' name ': ' Ari ", City
": "San Francisco"
}
-->

5.limitTo

The LimitTo filter generates a new array or string based on the parameters passed in, and the length of the new array or string depends on the parameters passed in, which controls whether to intercept from the front or from the back by passing in the positive negative value of the parameter. (If the passed-in length value is greater than the length of the array or string being manipulated, the entire array or string is returned.) )

Example:

 {{San Francisco is very cloudy | limitto:3}}

 <!--San-->

 {{San Francisco is very cloudy | limitto:-6}}

 <!--cloudy-->

An array can do the same thing. Returns the first element of an array:

{[' A ', ' B ', ' C ', ' d ', ' e ', ' F '] | limitto:1}}
<!--["a"]-->

6 lowercase

The lowercase filter converts the string to lowercase.

7.number

Number filters format numbers as text. Its second argument is optional, which controls the number of bits intercepted after the decimal point. (If a non-numeric character is passed in, an empty string will be returned.) )

8.orderBy

The By-order filter can sort the specified array with an expression.

The by-by can accept two parameters, the first is required, and the second is optional.

The first parameter is the predicate used to determine the sort direction of the array.

The type of the first argument is discussed in the following section.

Function
When the first argument is a function, the function is used as the getter method for the object to be sorted.

String
The result of parsing the string determines the direction in which the array elements are sorted. We can pass in + or-to force ascending or descending order.

Array
Use an array element as a predicate in a sort expression. For each element that is not strictly equal to the result of an expression, the first predicate is used.

The second parameter is used to control the direction of the sort (whether it is reversed).

Cases:

{{

' name ': ' Ari ', '
status ': ' Awake '
},{
' name ': ' Q ',
' status ': ' Sleeping '
},{
' name ': ' Nate ', '
status ': ' Awake '
}] | By: ' Name '}}
<!--
[
{] Na Me: "Ari", "status": "Awake"},
{"name": "Nate", "status": "Awake"},
{"name": "Q", "status": "Sleeping"}　　
]
-->

Reverses the sort result (the sort result can be reversed by setting the second argument to true: by order: ' name ': TRUE)

9.uppercase

Uppercase filters can convert strings to uppercase:

Two: Custom Filters

Creating a custom filter requires placing it in its own module.

The following examples illustrate:

Show name as first-letter uppercase

<! DOCTYPE html>
 
 

Customfilter.js

(function () {
 var app = Angular.module (' Customfilter ', []);
 App.controller (' Filtercontroller ', function ($scope) {
  $scope. Name = ' JACK ';
 });
 App.filter (' Capitalize ', function () {return
  function (input) {
   if (input) {return
    input[0]. toUpperCase () + input.slice (1);
   }
  };}
 );
} ();

The above is the ANGULARJS filter data collation, follow-up continue to supplement the relevant information, thank you for your support of this site!