Detailed explanation of $filter filter in AngularJS uses of custom filter

1. Built-in filter

* $filter  Filter, yes angularJs Used to process data and show it to my users in a better way. Such as formatting dates, converting case and so on. 
*  Filters have built-in filters and support custom filters. There are many built-in filters, which can be Baidu. The key is how to use: 
* 1. In HTML Use built-in filters directly in 
* 2. In js Use built-in filters in code 
* 3. Custom filter 
*
*  ( 1 ) Commonly used built-in filters 
*    number  Digital filter, you can set a few digits after the decimal point, etc. 
*    date   Time formatting filter, you can set your own time format 
*    filter  Filtered data 1 Generally, it is an array, and the data in the array can be objects, strings, etc. 
*    orderBy  Sorts according to a certain in the array 1 Attribute sorting of elements, etc. 
*    lowercase  Convert lowercase 
*    uppercase  Convert uppercase 
*    limitTo   String clipping   Use format {{ Cut string |limitTo : Numeric value }}  The absolute value represents the number of characters to be cut, the positive value represents cutting from scratch, and the negative value is the opposite. 
*
* */

2. Customize filters

/*
*  Definition format: 
*  Module name .filter( 'Filter name ' , function(){
*    return function( Filtered data, conditions 1 , conditions 2. . . . ){
*    // Filtering operation 
*    }
* });
* */

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

(1) "No condition", function: fixed conversion (sometimes the role code and store code will be encountered in the project, but the corresponding Chinese should be displayed when displaying, for example, the field code: 101 represents the boss

At this time, code values like this are more, so it is better to use filters.)

myApp.filter("ChangeCode",function () {
  return function (inputData) {
    var changed = "";
    switch (inputData){
      case '101':changed = " Boss ";break;
      case '102':changed = " Manager ";break;
      case '103':changed = " Employees ";break;
    }
    return changed;
  }
});
/* Finish, say 1 Use scenarios (on the function of this filter) and ways. 
*  Scenario: There is a field in the data returned by the server code Put it directly in the label <div>{{data.code}}</div>, Will display code Value instead of code Value corresponds to the title, at this time you can use this special 
*     Custom filters for this transformation 
*  Usage: 
*       ( 1 ) HTML Medium: <div>{{data.code | ChangeCode}}</div>// With built-in filter 1 In a similar way 
*       ( 2 ) js Medium: Variable  = $filter("ChangeCode")( Filtered code Data )//1 Sample calling mode 
*      
* */

(2) "With conditions", the function filters out data with a certain field value in a group of arrays, for example, a filter is defined here to filter out all ages with a certain value. The parameter is age

myApp.filter("deleteByAge",function () {
  return function (input,byAge,age) {
    var array = [];
    for(var i=0;i<input.length;i++){
      if(input[i][byAge]!=age){
        array.push(input[i]);
      }
    }
    return array;
  }
})
/*
*  Deal with 1 Group data 1 It is rarely used in HTML Among them, the custom filter with conditions is based on the age value, or according to any of the array elements 1 Attribute values are deleted and filtered. 
*  How to use: Variables  = $filter("deleteByAge")( Array, Attribute Name, Attribute Value ) ; 
* */

"Summarize how built-in filters are used"

(1) In HTML, the general format is: {{Filtered data filter name: condition 1: condition 2....}} ; The filter conditions are separated by ':'.

(2) In the code, the general format is: variable = $filter ("filter name") (filtered data, filter condition 1, filter condition 2,......)

"Custom Filter"

(1) Definition format:

    model.filter(filterName , function(){
       return function( Parameter 1 , parameter 2 , parameter 3. . . . . Parameter N){
         // Filter processing part 
        }
      })

model: Module name

filterName: Filter name

Parameter 1: Filtered data

Parameter 2: 1 is usually a filter condition, and there can be multiple parameters. The following parameter 31 and parameter N are all, which can be added as needed.