Angular--Filter filters

Filter

The filter in NG.

currency: Formats a number into a currency mode (such as $1,234.56). When no currency symbol is provided, the symbol for the current region is used by default.

Use:

html:{{currency_expression | currency:symbol:fractionSize}}

JS: $filter ("Currency") (amount,symbol,fractionsize);

Amount: number, filtered value.

Symbol: A string that is to be displayed as a currency symbol or identifier.

Fractionsize: A numeric value, the number of decimal digits of an integer, which defaults to the current maximum number of digits.

Date: Formats the time as a string based on the required format.

Use:

html:{{date_expression | date:format:timezone}}

JS: $filter ("date") (Date,format,timezone);

Date: Dates object formatted as a date. If you do not specify an input time zone string, the time is local time.

Format: Formatting rules/formatting.

TimeZone: Time zone.

Filter: Select a subset from the array and return it as a new array.

Use:

html:{{filter_expression | filter:expression:comparator}}

JS: $filter ("filter") (Array,expression,comparator);

Array: the filtered arrays.

Expression: A string/object/function that is used to select the judgment expression of the data from the array. Use $ to match any field.

Comparator: function/boolean/undefined, which is used to determine the expected value (returned from the filter expression) and the actual value (the object in the array) for comparison, should be considered a match. function (actual,expected);

JSON: Allows a JavaScript object to be converted to a JSON string.

Use:

html:{{json_expression | json:spacing}}

JS: $filter ("JSON") (object,spacing);

Object: the filtered objects.

Spacing: The number of spaces per indent, default is 2.

LimitTo: Creates an array or string that contains only the specified number of elements. The element is obtained from the beginning or end of an array, string, or number by the specified value and symbol (+ or-). If you enter a number, it is converted to a string.

Use:

html:{{limitto_expression | limitTo:limit:begin}}

JS: $filter ("LimitTo") (Input,limit,begin);

Input: Restricted array, string, number.

Limit: The length of the restriction.

Begin: Limit the position at which the length begins (according to the index).

lowercase: Converts the string to lowercase.

Use:

html:{{lowercase_expression | lowercase}}

JS: $filter ("lowercase") (input);

Input: The filtered string.

Number: Converts the value to text.

If the input is null or undefined, then it will be returned. If the input is infinity (positive infinity/negative infinity), the infinity symbol "∞" will be returned. If the input is not a number, an empty string is returned.

Use:

html:{{number_expression | number:fractionsize}}

JS: $filter ("number") (number,fractionsize);

Number: The value of the conversion.

Fractionsize: A numeric value, the number of decimal digits of an integer, which defaults to the current maximum number of digits. In the case of the default locale, this value is 3.

ORDER BY: Sorts the specified array by judging the expression. It is sorted by the alphabetical order of the string and the numeric number.

Note: If you find that numbers do not sort as expected, make sure that they are actually saved as numbers instead of strings.

Use:

html:{{orderby_expression | orderBy:expression:reverse}}

JS: $filter ("by") (Array,expression,reverse);

Array: the sorted arrays.

Expression: a string/function/array that is used to determine the order of the elements.

Reverse:boolean, reverses the order of the arrays. The default is False.

uppercase: Converts a string to uppercase.

Use:

Html:{{uppercase_expression |uppercase}}

JS: $filter ("uppercase") (input);

Input: The filtered string.

Bring your own filter using code:

  <DivNg-app= "Demo"Ng-controller= "Testctrl as CTRL"><!--HTML: {{ctrl.currencyvalue | currency: ' usd$ ': 1}}-{{Ctrl.currencyvalue}}<!--HTML: {{ctrl.datevalue | date: ' YYYY-MM-DD '}}-{{Ctrl.datevalue}}<!--HTML: <div ng-repeat= "I in NEWARR = (Ctrl.arr | filter: ' 2 ')" >{{i}}</div>-<DivNg-repeat= "I in Ctrl.newarr">{{i}}</Div><!--HTML: <div ng-repeat= "I in NEWARR = (Ctrl.arr | filter:{check:true})" >{{i}}</div>-<DivNg-repeat= "I in Ctrl._newarr">{{i}}</Div>{{ctrl.obj | json}}<!--HTML: <div ng-repeat= "I in Ctrl.arr | Limitto:3:2 ">{{i}}</div>-<DivNg-repeat= "I in Ctrl.secondnewarr">{{i}}</Div><!-- HTML: {{ctrl.str | lowercase}} --> {{CTRL.STR}}  HTML: <div ng-repeat= "I in Ctrl.arr | by: ' Name ': true" >{{i}}</div > --> <div Span style= "color: #ff0000;" >ng-repeat= "I in Ctrl.thirdnewarr" >{{i}}</div> <!--  HTML: {{ctrl.str | uppercase}} --> {{CTRL.NEWSTR}} </div >             

(function() {Angular.module ("Demo", []). Controller ("Testctrl", ["$filter", Testctrl]);functionTestctrl ($filter) {var vm =This; Vm.currencyvalue = 1234.56; Vm.currencyvalue = $filter ("Currency") (Vm.currencyvalue, "usd$", 1); Vm.datevalue =NewDate (); Vm.datevalue = $filter ("date") (Vm.datevalue, "Yyyy-mm-dd"); Vm.arr = [{name: ' John ', Phone: ' 555-1276 ', check:True}, {name: ' Mary ', Phone: ' 800-big-mary ', check:False}, {name: ' Mike ', Phone: ' 555-4321 ', check:True}, {name: ' Adam ', Phone: ' 555-5678 ', check:True}, {name: ' Julie ', Phone: ' 555-8765 ', check:false}, {name: ' Juliette ', Phone: ' 555-5678 ', check:true}]; Vm.newarr = $filter ("filter") (Vm.arr, "2" ); Vm._newarr = $filter ("filter") (Vm.arr,{check:True}); vm.obj = {"Name": "Beast", "age": +}; vm.secondnewarr = $filter ("LimitTo") (vm.arr,3,2); vm.str = "Hello World"; vm.str = $filter ("lowercase") (VM.STR); Vm.thirdnewarr = $filter ("by") (Vm.arr, "name",true); vm.newstr = $filter ("Uppercase") (vm.str);};} ());

Custom Filter

Basic code:

  Angular.module ("X", []). Filter ("FilterName", ["dependancy",function(dependancy) {       function( Value) {       //Your code return the data which passed filter (returns filtered data) };}]);   　　  

FilterName: Filter name.

Dependency: injected services.

Value: The data that needs to be filtered.

Custom Filter uses code:

  <Ng-app= "Demo" ng-controller= "Testctrl as Ctrl"<ng-repeat= "I in newarr= ( Ctrl.arr | Myfilter) "></div</div>       

(function() {Angular.module ("Demo", []). Filter ("Myfilter", Myfilter). Controller ("Testctrl", ["$filter", Testctrl]);function Myfilter () {return  Functionvar arr =  []; Angular.foreach (Value,function (Item,index) {if (Item.value.indexOf ("This") >=0) {Arr.push (item);} }); return arr;}}; function Testctrl ($filter) { var vm = this}]; }; }()); 

Here, the array of arr is filtered, and the object of the Value property of the object with the "This" text is put into a new array and returned to the array

Angular--Filter filters