1. Built-in filter
* $filter Filter,yesangularJsUsed to process data to display it to my users in a better way。For example, format date,Convert case, etc.。 * Filter即有内置Filter也支持自定义Filter。内置Filter很多,Can Baidu。关键yes如何使用: * 1.existHTML中直接使用内置Filter * 2.existjs代码中使用内置Filter * 3.自定义Filter * * (1)常用内置Filter * number 数字Filter,You can set how many digits after the decimal point to keep * date 时间格式化Filter,You can set the time format yourself * filter 过滤的数据一般yes数组,数组中的数据可以yes对象,Strings, etc. * orderBy Sort according to the attributes of an element in the array, etc. * lowercase Convert lowercase * uppercase Convert capital * limitTo String cut Usage format{{Cut string|limitTo:Value}} Value绝对值代表要切得字符个数,It means to start from scratch,Negative values are opposite。 * * */
2. Custom filters
/* * Define format: * Module name.filter('filter name', function(){ * return function (filtered data, condition 1, condition 2..) { * //Filter operation * } * }); * */
Use the above format to define two simple custom filters one with conditional and the other without conditional.
(1) [No conditions], function: fixed conversion (Sometimes you will encounter role code, store code, etc. in the project, but when displaying, you should display the corresponding Chinese, such as field code: 101 represents the boss.
At this time, if there are more code values like this, it is better to use filters. )
("ChangeCode",function () { return function (inputData) { var changed = ""; switch (inputData){ case '101':changed = "boss";break; case '102':changed = "manager";break; case '103':changed = "staff";break; } return changed; } }); /* Completed, let’s talk about the usage scenario (just the function of this filter) and the method. * Scenario: There is a field code in the data returned by the server, and it is placed directly in the tag <div>{{}}</div>. The code value will be displayed instead of the title corresponding to the code value. At this time, you can use this special * Custom filters for this conversion *How to use: * (1) In HTML: <div>{{ | ChangeCode}}</div>//The same way as the built-in filter * (2) In js: variable = $filter("ChangeCode") (filtered code data)//Same call method * * */
(2) [with conditions], function filters out data with a certain field value in an array, for example, here defines a filter that filters out all age values. Parameters are age
("deleteByAge",function () { return function (input,byAge,age) { var array = []; for(var i=0;i<;i++){ if(input[i][byAge]!=age){ (input[i]); } } return array; } }) /* * When processing a set of data, it is generally rarely used in HTML. Custom filters with conditions are based on age values, and can also be deleted and filtered based on any attribute value in the array element. *Usage method: variable = $filter("deleteByAge")(array, "attribute name", attribute value); * */
【Summary of how to use built-in filters】
(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:
(filterName,function(){ return function(parameter1,parameter2,parameter3.。。。。parameterN){ //Filter processing part } })
model: module name
filterName: filterName
Parameter 1: Filtered data
Parameter 2: Generally, it is a filter condition, there can be multiple, and the following parameters 3 and parameter N are all added as needed.
The above is a detailed explanation of the use of $filter filter in AngularJS (custom filter) introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!