1. Built-in filter
* $filter filter, which is used by angularJs to process data for better display to my users. Such as formatting dates, converting capitalization, and so on. * Filters have built-in filters as well as custom filters. There are a lot of built-in filters, you can Baidu. The key is how to use: * 1. Use built-in filters directly in HTML* 2. Use built-in filters in js code* 3. Custom filters* * (1) Common built-in filters * number Digital filters, can Set the number of digits after the decimal point is reserved * date format filter, you can set the time format yourself * filter The filtered data is generally an array, the data in the array can be an object, a string, etc. * orderBy sort according to an element in the array Attribute sorting, etc. * lowercase convert lowercase * uppercase convert uppercase * limitTo string cut using format {{cut string | limitTo: value}} The absolute value of the value represents the number of characters to be cut, which means starting from scratch The negative value is opposite. * * */
2. Custom filter
/* * Define the format: * Module name.filter('filter name', function(){ * return function (filtered data, condition 1, condition 2....) { * //filter operation* } * } ); * */ Apply the above format to define two simple custom filters with one conditional and one unconditional. (1) [Without condition], function: fixed conversion (sometimes the project will encounter the role code, the store code what, but the display should display the corresponding Chinese, such as the field code: 101 represents the boss this time like this The code value is more, then it is better to use the filter.)
myApp.filter("ChangeCode",function () { return function (inputData) { var changed = ""; switch (inputData){ case '101':changed = "boss";break; case '102':changed = " Manager ";break; case '103':changed = "employee";break; } return changed; } }); /*Complete, talk about the usage scenario (on the function of this filter) and the way. * Scene: There is a field code in the data returned by the server, directly put <div>{{data.code}}</div> in the tag, it will display the code value instead of the corresponding title of the code value, this time you can use this Special* Custom filters for this conversion * How to use: * (1) HTML: <div>{{data.code | ChangeCode}}</div>// Same as built-in filter* (2) Js: variable = $filter("ChangeCode") (filtered code data) // the same calling method * * */
(2) [With condition], the function filters out data of a certain value in a set of arrays, for example, a filter that filters out all values of a certain age. 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; } }) /* * When dealing with a set of data, it is rarely used in HTML, with conditional custom filters. It is based on the age value, and can also be deleted and filtered according to any attribute value in the array element. * Usage: Variable = $filter("deleteByAge")(array, "property name", attribute value); * */
[Summary of how to use the built-in filter]
(1) The general format in HTML is: {{filtered data | filter name: condition 1: condition 2. . . }} ; Filter conditions are separated by ':'. (2) The general format in the code is: variable = $filter("filter name") (filtered data, filter condition 1, filter condition 2,... . . . )
[Custom Filter] (1) Define the 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: Generally, there are multiple filter conditions. There can be more than one parameter. The following parameters are all up to parameter N and are added as needed.
Complete demo in the attachment
