Details about how to use the $ filter (custom filter) in AngularJS)

This article mainly introduces the usage of $ filter (custom filter) in AngularJS, which is very good and has reference value. If you need it, refer to 1. built-in filter.

* $ Filter is used in angularJs to process data and display it to our users in a better way. For example, format the date and convert the case to uppercase. * A built-in filter or custom filter is supported. There are many built-in filters, which can be Baidu. The key is how to use it: * 1. directly use the built-in filter in HTML * 2. use the built-in filter in js Code * 3. custom filter ** (1) commonly used built-in filter * number digital filter, you can set to retain the number after the decimal point * date time format filter, you can set the time format by yourself * The data filtered by the filter is generally an array, and the data in the array can be an object, * orderBy sorting: * lowercase conversion: lowercase * uppercase conversion: uppercase * limitTo string cutting: * orderBy sorting: sort by attributes of an element in the array. * lowercase conversion: lowercase * uppercase conversion: uppercase * limitTo string cutting: Format {string to be cut | limitTo: value} the absolute value of a value indicates the number of characters to be cut. Positive indicates the number of characters to be cut from the beginning. Negative values are opposite. ***/

2. Custom Filters

/** Definition Format: * Module name. filter ('filter name', function () {* return function (filtered data, condition 1, condition 2 ....) {* // Filter operation *}*});**/

Apply the preceding format to define two simple custom filters, one with and one without conditions.

(1) [without conditions], function: fixed conversion (sometimes the project encounters a role code, store code or something, but the corresponding Chinese characters must be displayed, such as the field code: 101 represents the boss

At this time, there are many code values like this, so it is better to use the filter .)

MyApp. filter ("ChangeCode", function () {return function (inputData) {var changed = ""; switch (inputData) {case '000000': changed = ""; break; case '100': changed = "manager"; break; case '100': changed = "employee"; break;} return changed ;}});/* completed, let's talk about the application scenarios (the filter function) and methods. * Scenario: the data returned by the server has a field code, which is directly placed in the tag.
{Data. code }}
The title corresponding to the code value instead of the code value will be displayed. In this case, you can use this special * custom filter for this conversion * usage: * (1) in HTML:
{Data. code | ChangeCode }}
// Same as built-in filter * (2) js: Variable = $ filter ("ChangeCode") (filtered code data) // same call method ***/

(2) [condition]: The function filters out data with a field value in a group of arrays as a value. For example, a filter is defined here to filter out all values of a age. The parameter is age.

MyApp. filter ("deleteByAge", function () {return function (input, byAge, age) {var array = []; for (var I = 0; I
 
  

  
[Summary use of built-in filters]
  
(1) In HTML, the general format is: {filtered data | Filter Name: Condition 1: Condition 2 ....}} ; Filter conditions are separated.
  
(2) In the code, the general format is: Variable = $ filter ("filter Name") (filtered data, filtering condition 1, filtering condition 2 ,......)
  
[Custom filter]
  
(1) Definition Format:
  
Model. filter (filterName, function () {return function (parameter 1, parameter 2, parameter 3 ..... Parameter N) {// filter processing }})
  

  
Model: Module name
  
FilterName: Filter Name
  
Parameter 1: filtered data
  
Parameter 2: generally used as a filter condition. You can add multiple filter conditions. Parameters 3 after parameter N are added as needed.
  
The above section describes how to use the $ filter (custom filter) in AngularJS. I hope it will help you. If you have any questions, please leave a message, the editor will reply to you in a timely manner. I would like to thank you for your support for PHP chinnet!
  
For more details about how to use the $ filter (custom filter) in AngularJS, please follow the PHP Chinese website!